<!DOCTYPE html>

<html lang=en>
 <head>
  <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
  <title>CSS Color Module Level 3</title>

  <!--
    <link href="https://www.w3.org/TR/2018/PR-css-color-3-20180315/"
   rel=canonical>
  -->
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--
  <link href="http://purl.org/dc/terms/" rel="schema.dcterms">
  <link href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights">
  -->
  <link rel="canonical" href="https://www.w3.org/TR/css-color-3/">
  <meta content="CSS Color Module Level 3" name=dcterms.title>
  <meta content=text name=dcterms.type>
  <meta content=2022-01-18 name=dcterms.date>
  <meta content="Tantek Çelik" name=dcterms.creator>
  <meta content="Chris Lilley" name=dcterms.creator>
  <meta content="L. David Baron" name=dcterms.creator>
  <meta content=W3C name=dcterms.creator>
  <meta
   content="&#60;abbr class=&quot;given-name&quot;&#62;L.&#60;/abbr&#62; &#60;span class=&quot;additional-name&quot;&#62;David&#60;/span&#62; &#60;span class=&quot;family-name&quot;&#62;Baron&#60;/span&#62;"
   name=dcterms.creator>
  <meta content="Mozilla Corporation" name=dcterms.creator>
  <meta content=W3C name=dcterms.publisher>
  <!--
  <meta content="https://www.w3.org/TR/2018/PR-css3-color-20180315/"
   name=dcterms.identifier>
  -->
  <!--
      FIXME when publishing: copy the current default.css and link to
      "default.css" rather than "../default.css"
   -->


  <link href="../default.css" rel=stylesheet type="text/css">
  <style type="text/css">
.example pre {
	background-color: #d5d5d5;
	margin: 1em 1cm;
	padding: 0 0.3cm;
}

pre { text-align:left }
pre.code { font-family: monospace }

table.colortable td {text-align:center }
table.colortable td.c { text-transform:uppercase }
table.colortable td:first-child, table.colortable td:first-child+td { border:1px solid black }
table.colortable th {text-align:center; background:black; color:white }

table.tprofile th.title {background:gray; color:white}
table.tprofile th { width:29%;padding:2px }
table.tprofile td { width:71%;padding:2px }

table.hslexample { background: #808080; padding:1em; margin:0; float:left; }
table.hslexample td,table.hslexample th { font-size:smaller;width:3em }

#hsltable {
	background: rgb(46.63% 46.63% 46.63%);
	padding: 0.5em;
}
div#hsltable {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	gap: 2em;
}
#hsltable>table {
	table-layout: fixed;
}
#hsltable td {
	padding: .75em;
}

.toc,.subtoc ul,.subtoc ol { list-style-type: none }

.profile { margin: 1cm }

.editorNote { color: red; font-style: italic }

.css::before, .css::after, .property::before, .property::after { content: none !important;}
 </style>
  <link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2021/W3C-REC"/>
  <!-- <script defer=defer
   src="https://test.csswg.org/harness/annotate.js#css-color-3_dev"
   type="text/javascript"></script> -->

 <body class="h-entry">
  <div class=head> <!--begin-logo-->
   <p><a href="https://www.w3.org/"><img height="48" width="72" alt="W3C" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C"/></a>
    <!--end-logo-->

   <h1 class="p-name" id="title">CSS Color Module Level 3</h1>

   <p id="w3c-state" class="no-num no-toc"><a href="https://www.w3.org/standards/types#REC">W3C Recommendation</a>
    <time class="dt-updated" datetime="2022-01-18">18 January 2022</time>
   </p>

   <details open><summary>More details about this document</summary>
   <dl>
    <dt>This version:</dt>

    <dd><a  class="u-url" href="https://www.w3.org/TR/2022/REC-css-color-3-20220118/">https://www.w3.org/TR/2022/REC-css-color-3-20220118/</a></dd>

    <!-- <dd><a  class="u-url" href="https://drafts.csswg.org/css-color-3/">https://drafts.csswg.org/css-color-3/</a></dd> -->


    <dt>Latest version:</dt>

    <dd><a class="u-url"
     href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a></dd>

    <dt>Previous version:</dt>

    <dd><a rel="prev"
      class="u-url" href="https://www.w3.org/TR/2021/REC-css-color-3-20210805/">https://www.w3.org/TR/2021/REC-css-color-3-20210805/</a></dd>

    <dt>History</dt>
    <dd><a class="u-url" href="https://www.w3.org/standards/history/css-color-3">https://www.w3.org/standards/history/css-color-3</a></dd>

    <dt>Editor's Draft:</dt>

    <dd><a href="https://drafts.csswg.org/css-color-3/" class="u-url">https://drafts.csswg.org/css-color-3/</a></dd>

    <dt>Implementation Report:</dt>

    <dd><a href="https://test.csswg.org/harness/results/css-color-3_dev/grouped/">https://test.csswg.org/harness/results/css-color-3_dev/grouped/</a></dd>

    <dt>Feedback:

    <dd><a href="https://github.com/w3c/csswg-drafts/issues">GitHub
     Issues</a> are preferred for discussion of this specification. When
     filing an issue, please put the text “css-color-3” in the title,
     preferably like this: “[css-color-3] <i>…summary of
     comment…</i>”. All issues and comments are <a
     href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
     and there is also a <a
     href="https://lists.w3.org/Archives/Public/www-style/">historical
     archive</a>.

    <dt>Editors:

        <dd class="p-author h-card vcard" data-editor-id="1464"><a lang="tr" class="p-name fn u-url url" href="http://tantek.com/">Tantek Çelik</a>
          (<span class="company p-org org h-card vcard"><a
          class="p-name fn p-org org u-url url"
          href="http://www.mozilla.org/">Mozilla Corporation</a></span>,
     and before at <a href="http://www.microsoft.com/">Microsoft
     Corporation</a>) &lt;<a class="email u-email"
     href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a>&gt;

     <dd class="p-author h-card vcard" data-editor-id="1438"><span class="p-name fn">Chris Lilley</span> (<span
      class="company p-org org h-card vcard"><a class="p-name fn p-org org u-url url"
      href="http://www.w3.org/">W3C</a></span>) &lt;<a class=""
     href="https://svgees.us/">https://svgees.us/</a>&gt;

     <dd class="p-author h-card vcard" data-editor-id="15393"><span class="p-name fn n"><abbr class="given-name">L.</abbr>
      <span class="additional-name">David</span> <span
      class="family-name">Baron</span></span> (<span class="company p-org org h-card vcard">W3C Invited Experts</span>) &lt;<a
     class="email u-email" href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>&gt;

    <dt>Additional Authors:

        <dd class="p-author h-card vcard"><span class="p-name fn">Steven Pemberton</span> (<span
          class="company p-org org h-card vcard"><a class="p-name fn p-org org u-url url"
          href="https://www.cwi.nl/">CWI</a></span>) &lt;<a class="u-email email"
     href="mailto:steven.pemberton@cwi.nl">steven.pemberton@cwi.nl</a>&gt;

     <dd class="p-author h-card vcard"><span class="p-name fn">Brad Pettit</span> (<span class="company p-org org h-card vcard"><a class="fn org url"
     href="http://www.microsoft.com/">Microsoft Corporation</a></span>)
     &lt;<a class="email u-email"
     href="mailto:bradp@microsoft.com">bradp@microsoft.com</a>&gt;

    <dt>Test Suite:

    <dd><a
     href="http://test.csswg.org/suites/css3-color/nightly-unstable/">http://test.csswg.org/suites/css3-color/nightly-unstable/</a>

     <dt>Errata:</dt>
     <dd><a href="https://www.w3.org/Style/2022/REC-css-color-3-20220118-errata.html">https://www.w3.org/Style/2022/REC-css-color-3-20220118-errata.html</a></dd>
   </dl>
   </details>

<!-- <p>Please check the <a href="https://www.w3.org/Style/2022/REC-css-color-3-20220118-errata.html">errata</a> for any errors or issues reported since publication.</p> -->

   <!--begin-copyright-->
   <p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2022 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-software">permissive document license</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc p-summary" id=abstract>Abstract</h2>

  <p>CSS (Cascading Style Sheets) is a language for describing the rendering
   of HTML and XML documents on screen, on paper, in speech, etc. It uses
   color-related properties and values to color the text, backgrounds,
   borders, and other parts of elements in a document. This specification
   describes color values and properties for foreground color and group
   opacity. These include properties and values from CSS level 2 and new
   values.

  <h2 class="no-num no-toc" id=status>Status of This Document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index</a> at https://www.w3.org/TR/.</em></p>

  <p>This document was published by the <a href="https://www.w3.org/groups/wg/css">CSS Working Group</a> as a <strong>Recommendation</strong>  using the Recommendation track.
  </p>

  <p>A W3C Recommendation is a specification that, after extensive consensus-building, is endorsed by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members, and has commitments from Working Group members to <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Requirements">royalty-free licensing</a> for implementations.</p>

  <p>W3C recommends the wide deployment of this specification as a standard for the Web.</p>

  <p>This document was produced by a group operating under the <a
   href="https://www.w3.org/Consortium/Patent-Policy-20200915/">W3C Patent Policy</a>. W3C maintains a <a
   href="https://www.w3.org/groups/wg/css/ipr"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.

   <p>This document is governed by the <a id="w3c_process_revision" href="https://www.w3.org/2021/Process-20211102/">2 November 2021 W3C Process Document</a>. </p>

    <!-- <div class="correction"><a href="https://www.w3.org/Consortium/Process/#candidate-correction">Candidate corrections</a> are marked in the document.</div> -->

  <!--end-status-->

  <p>A separate <a
   href="https://test.csswg.org/harness/results/css-color-3_dev/grouped/">
   implementation report</a> shows that each test
   in the <a href="https://test.csswg.org/harness/suite/css-color-3_dev/">test suite</a>
   was passed by at least two independent implementations.
   However, most tests have now been updated for <a href="https://www.w3.org/TR/css-color-4/">CSS Color 4</a>  (see
  <a href="https://test.csswg.org/harness/results/css-color-4_dev/grouped/">implementation report</a>).

  <p>A complete <a href="#changes">list of changes</a> to this document is
   available.

   <nav id="toc">
  <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
  <!--begin-toc-->
  <ul class=toc>
   <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>

   <li><a href="#dependencies"><span class=secno>2. </span>Dependencies</a>

   <li><a href="#color"><span class=secno>3. </span>Color properties</a>
    <ul class=toc>
     <li><a href="#foreground"><span class=secno>3.1. </span>Foreground
      color: the ‘<code class=property>color</code>’ property</a>

     <li><a href="#transparency"><span class=secno>3.2. </span>Transparency:
      the ‘<code class=property>opacity</code>’ property</a>
    </ul>

   <li><a href="#colorunits"><span class=secno>4. </span>Color units</a>
    <ul class=toc>
     <li><a href="#html4"><span class=secno>4.1. </span>Basic color
      keywords</a>

     <li><a href="#numerical"><span class=secno>4.2. </span>Numerical color
      values</a>
      <ul class=toc>
       <li><a href="#rgb-color"><span class=secno>4.2.1. </span>RGB color
        values</a>

       <li><a href="#rgba-color"><span class=secno>4.2.2. </span>RGBA color
        values</a>

       <li><a href="#transparent"><span class=secno>4.2.3. </span>‘<code
        class=css>transparent</code>’ color keyword</a>

       <li><a href="#hsl-color"><span class=secno>4.2.4. </span>HSL color
        values</a>
        <ul class=toc>
         <li><a href="#hsl-examples"><span class=secno>4.2.4.1. </span>HSL
          examples</a>
        </ul>

       <li><a href="#hsla-color"><span class=secno>4.2.5. </span>HSLA color
        values</a>
      </ul>

     <li><a href="#svg-color"><span class=secno>4.3. </span>Extended color
      keywords</a>

     <li><a href="#currentcolor"><span class=secno>4.4. </span>‘<code
      class=css>currentColor</code>’ color keyword</a>

     <li><a href="#css-system"><span class=secno>4.5. </span>CSS system
      colors</a>
      <ul class=toc>
       <li><a href="#css2-system"><span class=secno>4.5.1. </span>CSS2 system
        colors</a>
      </ul>

     <li><a href="#notes"><span class=secno>4.6. </span>Notes on using
      colors</a>
    </ul>

   <li><a href="#alpha"><span class=secno>5. </span>Simple alpha
    compositing</a>

   <li><a href="#sample"><span class=secno>6. </span>Sample style sheet for
    (X)HTML</a>

   <li><a href="#profiles"><span class=secno>7. </span>Profiles</a>

   <li><a href="#testsuite"><span class=secno>8. </span>Test suite</a>

   <li><a href="#future"><span class=secno>9. </span>Future features</a>

   <li><a href="#acknowledgments"><span class=secno>10.
    </span>Acknowledgments</a>

   <li><a href="#changes"><span class=secno>11. </span>Changes</a>

   <li><a href="#references"><span class=secno>12. </span>References</a>
    <ul class=toc>
     <li><a href="#normative"><span class=secno>12.1. </span>Normative</a>

     <li><a href="#informative"><span class=secno>12.2.
      </span>Informative</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property">Property index</a>
  </ul>
  <!--end-toc-->
</nav>
  <hr>

  <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

  <p><em>This section is non-normative.</em>

  <p>CSS beyond level 2 is a set of modules, divided up to allow the
   specifications to develop incrementally, along with their implementations.
   This specification is one of those modules.

  <p> This module describes CSS properties which allow authors to specify the
   foreground color and opacity of an element. This module also describes in
   detail the CSS &lt;color&gt; value type.

  <p>It not only defines the color-related properties and values that already
   exist in <a href="https://www.w3.org/TR/CSS1/">CSS1</a> and <a
   href="https://www.w3.org/TR/CSS2/">CSS2</a>, but also defines new
   properties and values.

  <p>The specification is the result of the merging of relevant parts of the
   following Recommendations and Working Drafts, and the addition of some new
   features.

  <ul>
   <li>HTML 4.01 <a href="#ref-HTML401">[HTML401]<!--{{HTML401}}--></a>

   <li>CSS 2.0 <a href="#ref-CSS2">[CSS2]<!--{{CSS2}}--></a>

   <li>SVG 1.0 <a href="#ref-SVG10">[SVG10]<!--{{SVG10}}--></a>

   <li>User Interface for CSS3 (16 February 2000) <a
    href="#ref-CSS-UI-3">[CSS-UI-3]<!--{{CSS-UI-3}}--></a>
  </ul>

  <h2 id=dependencies><span class=secno>2. </span>Dependencies</h2>

  <p>Additional terminology is defined in the <a
   href="https://www.w3.org/TR/CSS21/conform.html#defs">Definitions</a>
   section of <a href="#ref-CSS21">[CSS21]<!--{{!CSS21}}--></a>. Examples of
   document source code and fragments are given in XML <a
   href="#ref-XML10">[XML10]<!--{{XML10}}--></a> or HTML <a
   href="#ref-HTML401">[HTML401]<!--{{HTML401}}--></a> syntax.

  <h2 id=color><span class=secno>3. </span>Color properties</h2>


  <h3 id=foreground><span class=secno>3.1. </span>Foreground color: the ‘<a
   href="#color"><code class=property>color</code></a>’ property</h3>

    <table class="def propdef">
      <tbody>
       <tr>
        <th>Name:</th>

        <td><dfn id=color1>color</dfn></td>
       </tr>
       <tr>
        <th>Value:</th>

        <td>&lt;color&gt; | inherit</td>
       </tr>
       <tr>
        <th>Initial:</th>

        <td>depends on user agent</td>
       </tr>
       <tr>
        <th>Applies to:</th>

        <td>all elements</td>
       </tr>
       <tr>
        <th>Inherited:</th>

        <td>yes</td>

       <tr>
        <th>Percentages:</th>

        <td>N/A</td>
       </tr>

       <tr>
        <th>Computed value:</th>

        <td>
         <ul>
          <li>The computed value for basic color keywords, RGB hex values and
           extended color keywords is the equivalent triplet of numerical RGB
           values, e.g. <span class=example>six digit hex value or rgb(...)
           functional value</span>, with an alpha value of 1.</li>

          <li>The computed value of the keyword ‘<a
           href="#transparent-def"><code class=css><span class=index-inst
           id=transparent0>transparent</span></code></a>’ is the quadruplet of
           all zero numerical RGBA values, e.g. <span
           class=example>rgba(0,0,0,0)</span>.</li>

          <li>For all other values, the computed value is the specified value.</li>
         </ul>
        </td>
     </table>

  <p>This property describes the foreground color of an element's text
   content. In addition it is used to provide a potential indirect value (<a
   class=index-inst href="#currentcolor" id=currentcolor0>currentColor</a>)
   for any <em>other</em> properties that accept color values. If the ‘<a
   href="#currentColor-def"><code class=css><span class=index-inst
   id=currentcolor1>currentColor</span></code></a>’ keyword is set on the
   ‘<a href="#color"><code class=property>color</code></a>’ property
   itself, it is treated as ‘<code class=css>color: inherit</code>’.

  <p> There are different ways to specify lime green:

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
em { color: lime }               /* color keyword */
em { color: rgb(0,255,0) }       /* RGB range 0-255   */
</pre>
  </div>

  <dl>
   <dt><dfn id=ltcolorgt
    title="color:&#60;color&#62;"><var>&lt;color&gt;</var></dfn></dt>

   <dd>Color units are defined in a <a href="#colorunits">following</a>
    section.</dd>
  </dl>

  <h3 id=transparency><span class=secno>3.2. </span>Transparency: the ‘<a
   href="#opacity"><code class=property>opacity</code></a>’ property</h3>

  <p> Opacity can be thought of as a postprocessing operation. Conceptually,
   after the element (including its descendants) is rendered into an RGBA
   offscreen image, the opacity setting specifies how to blend the offscreen
   rendering into the current composite rendering. See <a
   href="#alpha">simple alpha compositing</a> for details.</p>

    <table class="def propdef">
      <tbody>
       <tr>
        <th>Name:</th>

        <td><dfn id=opacity>opacity</dfn></td>
       </tr>

       <tr>
        <th>Value:</th>

        <td>&lt;alphavalue&gt; | inherit</td>
       </tr>

       <tr>
        <th>Initial:</th>

        <td>1</td>
       </tr>

       <tr>
        <th>Applies to:</th>

        <td>all elements</td>
       </tr>

       <tr>
        <th>Inherited:</th>

        <td>no</td>
       </tr>

       <tr>
        <th>Percentages:</th>

        <td>N/A</td>
       </tr>

       <tr>
        <th>Computed value:</th>

        <td>The same as the specified value after clipping the
         &lt;alphavalue&gt; to the range [0.0,1.0].</td>
       </tr>
     </table>

  <dl>
   <dt id=alphavaluedt><dfn class=prop-value
    id=alphavalue-def>&lt;alphavalue&gt;</dfn>

   <dd>Syntactically a &lt;number&gt;. The uniform opacity setting to be
    applied across an entire object. Any values outside the range 0.0 (fully
    transparent) to 1.0 (fully opaque) will be clamped to this range. If the
    object has children, then the effect is as if the children were blended
    against the current background using a mask where the value of each pixel
    of the mask is &lt;alphavalue&gt;. For SVG, ‘has children’ is
    equivalent to being a container element <a
    href="#ref-SVG11">[SVG11]<!--{{SVG11}}--></a>.
  </dl>

  <p>Since an element with opacity less than 1 is composited from a single
   offscreen image, content outside of it cannot be layered in z-order
   between pieces of content inside of it. For the same reason,
   implementations must create a new stacking context for any element with
   opacity less than 1. If an element with opacity less than 1 is not
   positioned, then it is painted on the same layer, within its parent
   stacking context, as positioned elements with stack level 0. If an element
   with opacity less than 1 is positioned, the ‘<code
   class=property>z-index</code>’ property applies as described in <a
   href="#ref-CSS21">[CSS21]<!--{{!CSS21}}--></a>, except that if the used
   value is ‘<code class=css>auto</code>’ then the element behaves
   exactly as if it were ‘<code class=css>0</code>’. See <a
   href="https://www.w3.org/TR/CSS21/visuren.html#layers">section 9.9</a> and
   <a href="https://www.w3.org/TR/CSS21/zindex.html">Appendix E</a> of <a
   href="#ref-CSS21">[CSS21]<!--{{!CSS21}}--></a> for more information on
   stacking contexts. The rules in this paragraph do not apply to SVG
   elements, since SVG has its own <a
   href="https://www.w3.org/TR/SVG11/render.html">rendering model</a> (<a
   href="#ref-SVG11">[SVG11]<!--{{!SVG11}}--></a>, Chapter 3).

  <h2 id=colorunits><span class=secno>4. </span>Color units</h2>

  <p>A <dfn class=value-def-color id=valuea-def-color>&lt;color&gt;</dfn> is
   either a keyword or a numerical specification.

  <h3 id=html4><span class=secno>4.1. </span>Basic color keywords</h3>

  <p>The list of basic color keywords is: aqua, black, blue, fuchsia, gray,
   green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
   yellow. The color names are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>.

  <table class=colortable>
   <caption><b>Color names and <span class=index-inst id=srgbval>sRGB</span>
    values</b><br>
   </caption>

   <tbody>
    <tr>
     <th style="background:black">Named

     <th>Numeric

     <th>Color name

     <th>Hex rgb

     <th>Decimal

    <tr>
     <td class=c style="background:black">

     <td class=c style="background:#000000">

     <td><dfn id=black>black</dfn>

     <td class=c style="background:silver">#000000

     <td class=c style="background:silver">0,0,0

    <tr>
     <td class=c style="background:silver">

     <td class=c style="background:#C0C0C0">

     <td><dfn id=silver>silver</dfn>

     <td class=c style="background:silver">#C0C0C0

     <td class=c style="background:silver">192,192,192

    <tr>
     <td class=c style="background:gray">

     <td class=c style="background:#808080">

     <td><dfn id=gray>gray</dfn>

     <td class=c style="background:silver">#808080

     <td class=c style="background:silver">128,128,128

    <tr>
     <td class=c style="background:white">

     <td class=c style="background:#FFFFFF">

     <td><dfn id=white>white</dfn>

     <td class=c style="background:silver">#FFFFFF

     <td class=c style="background:silver">255,255,255

    <tr>
     <td class=c style="background:maroon">

     <td class=c style="background:#800000">

     <td><dfn id=maroon>maroon</dfn>

     <td class=c style="background:silver">#800000

     <td class=c style="background:silver">128,0,0

    <tr>
     <td class=c style="background:red">

     <td class=c style="background:#FF0000">

     <td><dfn id=red>red</dfn>

     <td class=c style="background:silver">#FF0000

     <td class=c style="background:silver">255,0,0

    <tr>
     <td class=c style="background:purple">

     <td class=c style="background:#800080">

     <td><dfn id=purple>purple</dfn>

     <td class=c style="background:silver">#800080

     <td class=c style="background:silver">128,0,128

    <tr>
     <td class=c style="background:fuchsia">

     <td class=c style="background:#FF00FF">

     <td><dfn id=fuchsia>fuchsia</dfn>

     <td class=c style="background:silver">#FF00FF

     <td class=c style="background:silver">255,0,255

    <tr>
     <td class=c style="background:green">

     <td class=c style="background:#008000">

     <td><dfn id=green>green</dfn>

     <td class=c style="background:silver">#008000

     <td class=c style="background:silver">0,128,0

    <tr>
     <td class=c style="background:lime">

     <td class=c style="background:#00FF00">

     <td><dfn id=lime>lime</dfn>

     <td class=c style="background:silver">#00FF00

     <td class=c style="background:silver">0,255,0

    <tr>
     <td class=c style="background:olive">

     <td class=c style="background:#808000">

     <td><dfn id=olive>olive</dfn>

     <td class=c style="background:silver">#808000

     <td class=c style="background:silver">128,128,0

    <tr>
     <td class=c style="background:yellow">

     <td class=c style="background:#FFFF00">

     <td><dfn id=yellow>yellow</dfn>

     <td class=c style="background:silver">#FFFF00

     <td class=c style="background:silver">255,255,0

    <tr>
     <td class=c style="background:navy">

     <td class=c style="background:#000080">

     <td><dfn id=navy>navy</dfn>

     <td class=c style="background:silver">#000080

     <td class=c style="background:silver">0,0,128

    <tr>
     <td class=c style="background:blue">

     <td class=c style="background:#0000FF">

     <td><dfn id=blue>blue</dfn>

     <td class=c style="background:silver">#0000FF

     <td class=c style="background:silver">0,0,255

    <tr>
     <td class=c style="background:teal">

     <td class=c style="background:#008080">

     <td><dfn id=teal>teal</dfn>

     <td class=c style="background:silver">#008080

     <td class=c style="background:silver">0,128,128

    <tr>
     <td class=c style="background:aqua">

     <td class=c style="background:#00FFFF">

     <td><dfn id=aqua>aqua</dfn>

     <td class=c style="background:silver">#00FFFF

     <td class=c style="background:silver">0,255,255
  </table>

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
</pre>
  </div>

  <h3 id=numerical><span class=secno>4.2. </span>Numerical color values</h3>

  <h4 id=rgb-color><span class=secno>4.2.1. </span>RGB color values</h4>

  <p>The <span class=index-def id=rgb-def title="rgb()">RGB color
   model</span> is used in numerical color specifications. These examples all
   specify the same color:

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
</pre>
  </div>

  <p> The format of an RGB value in hexadecimal notation is a ‘<code
   class=css>#</code>’ immediately followed by either three or six
   hexadecimal characters. The three-digit RGB notation (<span
   class=index-def id=rgb>#rgb</span>) is converted into six-digit form
   (<span class=index-def id=rrggbb>#rrggbb</span>) by replicating digits,
   not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures
   that white (#ffffff) can be specified with the short notation (#fff) and
   removes any dependencies on the color depth of the display.

  <p> The format of an RGB value in the functional notation is ‘<code
   class=css>rgb(</code>’ followed by a comma-separated list of three
   numerical values (either three integer values or three percentage values)
   followed by ‘<code class=css>)</code>’. The integer value 255
   corresponds to 100%, and to F or FF in the hexadecimal notation:
   rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are
   allowed around the numerical values.

  <p>All RGB colors are specified in the <span class=index-def
   id=sRGB-def>sRGB</span> color space (see <a
   href="#ref-SRGB">[SRGB]<!--{{!SRGB}}--></a>). User agents may vary in the
   fidelity with which they represent these colors, but using sRGB provides
   an unambiguous and objectively measurable definition of what the color
   should be, which can be related to international standards (see <a
   href="#ref-COLORIMETRY">[COLORIMETRY]<!--{{!COLORIMETRY}}--></a>).

  <p>Values outside the device gamut should be clipped or mapped into the
   gamut when the gamut is known: the red, green, and blue values must be
   changed to fall within the range supported by the device. User agents may
   perform higher quality mapping of colors from one gamut to another. This
   specification does not define precise clipping behavior. For a typical CRT
   monitor, whose device gamut is the same as sRGB, the four rules below are
   equivalent:

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */
</pre>
  </div>

  <p>Other devices, such as printers, have different gamuts than sRGB; some
   colors outside the 0..255 sRGB range will be representable (inside the
   device gamut), while other colors inside the 0..255 sRGB range will be
   outside the device gamut and will thus be mapped.

  <h4 id=rgba-color><span class=secno>4.2.2. </span>RGBA color values</h4>

  <p>The <span class=index-def id=rgba-def title="rgba()">RGB color model is
   extended in this specification to include “alpha” to allow
   specification of the opacity of a color. See <a href="#alpha">simple alpha
   compositing</a> for details. These examples all specify the same
   color:</span>

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
em { color: rgb(255,0,0) }      /* integer range 0 - 255 */
em { color: rgba(255,0,0,1)     /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) }   /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
</pre>
  </div>

  <p>Unlike RGB values, there is no hexadecimal notation for an RGBA value.

  <p> The format of an RGBA value in the functional notation is ‘<code
   class=css>rgba(</code>’ followed by a comma-separated list of three
   numerical values (either three integer values or three percentage values),
   followed by an <a class=index-inst href="#alphavaluedt"
   id=ltalphavaluegt>&lt;alphavalue&gt;</a>, followed by ‘<code
   class=css>)</code>’. The integer value 255 corresponds to 100%,
   rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). White space characters
   are allowed around the numerical values.

  <p>Implementations must clip the red, green, and blue components of RGBA
   color values to the device gamut according to the rules for the RGB color
   value composed of those components.

  <p>These examples specify effects that are possible with the rgba()
   notation:

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */
</pre>
  </div>

  <p class=note><strong>Note.</strong> If RGBA values are not supported by a
   user agent, they should be treated like unrecognized values per the CSS
   forward compatibility parsing rules (<a
   href="#ref-CSS21">[CSS21]<!--{{!CSS21}}--></a>, Chapter 4). RGBA values
   must <em>not</em> be treated as simply an RGB value with the opacity
   ignored.

  <h4 id=transparent><span class=secno>4.2.3. </span>‘<a
   href="#transparent-def"><code class=css>transparent</code></a>’ color
   keyword</h4>

  <p>CSS1 introduced the ‘<a href="#transparent-def"><code
   class=css>transparent</code></a>’ value for the background-color
   property. CSS2 allowed border-color to also accept the ‘<a
   href="#transparent-def"><code class=css>transparent</code></a>’ value.
   The Open eBook(tm) Publication Structure 1.0.1 <a
   href="#ref-OEB101">[OEB101]<!--{{OEB101}}--></a> extended the ‘<a
   href="#color"><code class=property>color</code></a>’ property to also
   accept the ‘<a href="#transparent-def"><code
   class=css>transparent</code></a>’ keyword. CSS3 extends the color value
   to include the ‘<a href="#transparent-def"><code
   class=css>transparent</code></a>’ keyword to allow its use with all
   properties that accept a &lt;color&gt; value. This simplifies the
   definition of those properties in CSS3.

  <dl>
   <dt><dfn id=transparent-def>transparent</dfn>

   <dd>Fully transparent. This keyword can be considered a shorthand for
    transparent black, rgba(0,0,0,0), which is its computed value.
  </dl>

  <h4 id=hsl-color><span class=secno>4.2.4. </span>HSL color values</h4>

  <p>CSS3 adds numerical <span class=index-def id=hsl-def
   title="hsl()">hue-saturation-lightness (HSL) colors as a complement to
   numerical RGB colors. It has been observed that RGB colors have the
   following limitations: </span>

  <ul>
   <li>RGB is hardware-oriented: it reflects the use of CRTs.

   <li>RGB is non-intuitive. People can learn how to use RGB, but actually by
    internalizing how to translate hue, saturation and lightness, or
    something similar, to RGB.
  </ul>

  <p> There are several other color schemes possible. Some advantages of HSL
   are that it is symmetrical to lightness and darkness (which is not the
   case with HSV for example), and it is trivial to convert HSL to RGB.

  <p> HSL colors are encoding as a triple (hue, saturation, lightness). Hue
   is represented as an angle of the color circle (i.e. the rainbow
   represented in a circle). This angle is so typically measured in degrees
   that the unit is implicit in CSS; syntactically, only a &lt;number&gt; is
   given. By definition red=0=360, and the other colors are spread around the
   circle, so green=120, blue=240, etc. As an angle, it implicitly wraps
   around such that -120=240 and 480=120. One way an implementation could
   normalize such an angle x to the range [0,360) (<em>i.e.</em> zero
   degrees, inclusive, to 360 degrees, exclusive) is to compute (((x mod 360)
   + 360) mod 360). Saturation and lightness are represented as percentages.
   100% is full saturation, and 0% is a shade of gray. 0% lightness is black,
   100% lightness is white, and 50% lightness is “normal”.

  <p>So for instance:

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
* { color: hsl(0, 100%, 50%) }   /* red */
* { color: hsl(120, 100%, 50%) } /* lime */
* { color: hsl(120, 100%, 25%) } /* dark green */
* { color: hsl(120, 100%, 75%) } /* light green */
* { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */
</pre>
  </div>

  <p> The advantage of HSL over RGB is that it is far more intuitive: you can
   guess at the colors you want, and then tweak. It is also easier to create
   sets of matching colors (by keeping the hue the same and varying the
   lightness/darkness, and saturation)

  <p>If saturation is less than 0%, implementations must clip it to 0%. If
   the resulting value is outside the device gamut, implementations must clip
   it to the device gamut. This clipping should preserve the hue when
   possible, but is otherwise undefined. (In other words, the clipping is
   different from applying the rules for clipping of RGB colors after
   applying the algorithm below for converting HSL to RGB.)


  <p>Converting an HSL color to sRGB is straightforward mathematically.
    Here's a sample implementation of the conversion algorithm in JavaScript.
    It returns an array of three numbers
    representing the red, green, and blue channels of the colors,
    normalized to the range [0, 1].</p>

  <pre class='code lang-javascript'>
    function hslToRgb (hue, sat, light) {
      hue = hue % 360;

      if (hue &lt; 0) {
          hue += 360;
      }

      sat /= 100;
      light /= 100;

      function f(n) {
          let k = (n + hue/30) % 12;
          let a = sat * Math.min(light, 1 - light);
          return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
      }

      return [f(0), f(8), f(4)];
  }
  </pre>


  <h5 id=hsl-examples><span class=secno>4.2.4.1. </span>HSL examples</h5>

  <p> Each table below represents one hue. Twelve equally spaced colors (i.e.
   at 30° intervals) have been chosen from the color circle: red, yellow,
   green, cyan, blue, magenta, with all the intermediate colors (the last is
   the color between magenta and red).</p>


    <p>In each table, the X axis represents the saturation
	while the Y axis represents the lightness.</p>

  <div id="hsltable">
		<table><thead>
				<tr>
					<th colspan="7">0° Reds</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(255, 204, 204);"></td><td style="background-color: rgb(250, 209, 209);"></td><td style="background-color: rgb(245, 214, 214);"></td><td style="background-color: rgb(240, 219, 219);"></td><td style="background-color: rgb(235, 224, 224);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(255, 153, 153);"></td><td style="background-color: rgb(245, 163, 163);"></td><td style="background-color: rgb(235, 173, 173);"></td><td style="background-color: rgb(224, 184, 184);"></td><td style="background-color: rgb(214, 194, 194);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(255, 102, 102);"></td><td style="background-color: rgb(240, 117, 117);"></td><td style="background-color: rgb(224, 133, 133);"></td><td style="background-color: rgb(209, 148, 148);"></td><td style="background-color: rgb(194, 163, 163);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(255, 51, 51);"></td><td style="background-color: rgb(235, 71, 71);"></td><td style="background-color: rgb(214, 92, 92);"></td><td style="background-color: rgb(194, 112, 112);"></td><td style="background-color: rgb(173, 133, 133);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(255, 0, 0);"></td><td style="background-color: rgb(230, 26, 26);"></td><td style="background-color: rgb(204, 51, 51);"></td><td style="background-color: rgb(179, 77, 77);"></td><td style="background-color: rgb(153, 102, 102);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(204, 0, 0);"></td><td style="background-color: rgb(184, 20, 20);"></td><td style="background-color: rgb(163, 41, 41);"></td><td style="background-color: rgb(143, 61, 61);"></td><td style="background-color: rgb(122, 82, 82);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(153, 0, 0);"></td><td style="background-color: rgb(138, 15, 15);"></td><td style="background-color: rgb(122, 31, 31);"></td><td style="background-color: rgb(107, 46, 46);"></td><td style="background-color: rgb(92, 61, 61);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(102, 0, 0);"></td><td style="background-color: rgb(92, 10, 10);"></td><td style="background-color: rgb(82, 20, 20);"></td><td style="background-color: rgb(71, 31, 31);"></td><td style="background-color: rgb(61, 41, 41);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(51, 0, 0);"></td><td style="background-color: rgb(46, 5, 5);"></td><td style="background-color: rgb(41, 10, 10);"></td><td style="background-color: rgb(36, 15, 15);"></td><td style="background-color: rgb(31, 20, 20);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">30° Reds-Yellows (=Oranges)</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(255, 230, 204);"></td><td style="background-color: rgb(250, 230, 209);"></td><td style="background-color: rgb(245, 230, 214);"></td><td style="background-color: rgb(240, 230, 219);"></td><td style="background-color: rgb(235, 230, 224);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(255, 204, 153);"></td><td style="background-color: rgb(245, 204, 163);"></td><td style="background-color: rgb(235, 204, 173);"></td><td style="background-color: rgb(224, 204, 184);"></td><td style="background-color: rgb(214, 204, 194);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(255, 179, 102);"></td><td style="background-color: rgb(240, 179, 117);"></td><td style="background-color: rgb(224, 179, 133);"></td><td style="background-color: rgb(209, 179, 148);"></td><td style="background-color: rgb(194, 179, 163);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(255, 153, 51);"></td><td style="background-color: rgb(235, 153, 71);"></td><td style="background-color: rgb(214, 153, 92);"></td><td style="background-color: rgb(194, 153, 112);"></td><td style="background-color: rgb(173, 153, 133);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(255, 128, 0);"></td><td style="background-color: rgb(230, 128, 26);"></td><td style="background-color: rgb(204, 128, 51);"></td><td style="background-color: rgb(179, 128, 77);"></td><td style="background-color: rgb(153, 128, 102);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(204, 102, 0);"></td><td style="background-color: rgb(184, 102, 20);"></td><td style="background-color: rgb(163, 102, 41);"></td><td style="background-color: rgb(143, 102, 61);"></td><td style="background-color: rgb(122, 102, 82);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(153, 77, 0);"></td><td style="background-color: rgb(138, 77, 15);"></td><td style="background-color: rgb(122, 77, 31);"></td><td style="background-color: rgb(107, 77, 46);"></td><td style="background-color: rgb(92, 77, 61);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(102, 51, 0);"></td><td style="background-color: rgb(92, 51, 10);"></td><td style="background-color: rgb(82, 51, 20);"></td><td style="background-color: rgb(71, 51, 31);"></td><td style="background-color: rgb(61, 51, 41);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(51, 26, 0);"></td><td style="background-color: rgb(46, 26, 5);"></td><td style="background-color: rgb(41, 26, 10);"></td><td style="background-color: rgb(36, 26, 15);"></td><td style="background-color: rgb(31, 26, 20);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">60° Yellows</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(255, 255, 204);"></td><td style="background-color: rgb(250, 250, 209);"></td><td style="background-color: rgb(245, 245, 214);"></td><td style="background-color: rgb(240, 240, 219);"></td><td style="background-color: rgb(235, 235, 224);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(255, 255, 153);"></td><td style="background-color: rgb(245, 245, 163);"></td><td style="background-color: rgb(235, 235, 173);"></td><td style="background-color: rgb(224, 224, 184);"></td><td style="background-color: rgb(214, 214, 194);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(255, 255, 102);"></td><td style="background-color: rgb(240, 240, 117);"></td><td style="background-color: rgb(224, 224, 133);"></td><td style="background-color: rgb(209, 209, 148);"></td><td style="background-color: rgb(194, 194, 163);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(255, 255, 51);"></td><td style="background-color: rgb(235, 235, 71);"></td><td style="background-color: rgb(214, 214, 92);"></td><td style="background-color: rgb(194, 194, 112);"></td><td style="background-color: rgb(173, 173, 133);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(255, 255, 0);"></td><td style="background-color: rgb(230, 230, 26);"></td><td style="background-color: rgb(204, 204, 51);"></td><td style="background-color: rgb(179, 179, 77);"></td><td style="background-color: rgb(153, 153, 102);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(204, 204, 0);"></td><td style="background-color: rgb(184, 184, 20);"></td><td style="background-color: rgb(163, 163, 41);"></td><td style="background-color: rgb(143, 143, 61);"></td><td style="background-color: rgb(122, 122, 82);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(153, 153, 0);"></td><td style="background-color: rgb(138, 138, 15);"></td><td style="background-color: rgb(122, 122, 31);"></td><td style="background-color: rgb(107, 107, 46);"></td><td style="background-color: rgb(92, 92, 61);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(102, 102, 0);"></td><td style="background-color: rgb(92, 92, 10);"></td><td style="background-color: rgb(82, 82, 20);"></td><td style="background-color: rgb(71, 71, 31);"></td><td style="background-color: rgb(61, 61, 41);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(51, 51, 0);"></td><td style="background-color: rgb(46, 46, 5);"></td><td style="background-color: rgb(41, 41, 10);"></td><td style="background-color: rgb(36, 36, 15);"></td><td style="background-color: rgb(31, 31, 20);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">90° Yellow-Greens</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(230, 255, 204);"></td><td style="background-color: rgb(230, 250, 209);"></td><td style="background-color: rgb(230, 245, 214);"></td><td style="background-color: rgb(230, 240, 219);"></td><td style="background-color: rgb(230, 235, 224);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(204, 255, 153);"></td><td style="background-color: rgb(204, 245, 163);"></td><td style="background-color: rgb(204, 235, 173);"></td><td style="background-color: rgb(204, 224, 184);"></td><td style="background-color: rgb(204, 214, 194);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(179, 255, 102);"></td><td style="background-color: rgb(179, 240, 117);"></td><td style="background-color: rgb(179, 224, 133);"></td><td style="background-color: rgb(179, 209, 148);"></td><td style="background-color: rgb(179, 194, 163);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(153, 255, 51);"></td><td style="background-color: rgb(153, 235, 71);"></td><td style="background-color: rgb(153, 214, 92);"></td><td style="background-color: rgb(153, 194, 112);"></td><td style="background-color: rgb(153, 173, 133);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(128, 255, 0);"></td><td style="background-color: rgb(128, 230, 26);"></td><td style="background-color: rgb(128, 204, 51);"></td><td style="background-color: rgb(128, 179, 77);"></td><td style="background-color: rgb(128, 153, 102);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(102, 204, 0);"></td><td style="background-color: rgb(102, 184, 20);"></td><td style="background-color: rgb(102, 163, 41);"></td><td style="background-color: rgb(102, 143, 61);"></td><td style="background-color: rgb(102, 122, 82);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(77, 153, 0);"></td><td style="background-color: rgb(77, 138, 15);"></td><td style="background-color: rgb(77, 122, 31);"></td><td style="background-color: rgb(77, 107, 46);"></td><td style="background-color: rgb(77, 92, 61);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(51, 102, 0);"></td><td style="background-color: rgb(51, 92, 10);"></td><td style="background-color: rgb(51, 82, 20);"></td><td style="background-color: rgb(51, 71, 31);"></td><td style="background-color: rgb(51, 61, 41);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(26, 51, 0);"></td><td style="background-color: rgb(26, 46, 5);"></td><td style="background-color: rgb(26, 41, 10);"></td><td style="background-color: rgb(26, 36, 15);"></td><td style="background-color: rgb(26, 31, 20);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">120° Greens</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(204, 255, 204);"></td><td style="background-color: rgb(209, 250, 209);"></td><td style="background-color: rgb(214, 245, 214);"></td><td style="background-color: rgb(219, 240, 219);"></td><td style="background-color: rgb(224, 235, 224);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(153, 255, 153);"></td><td style="background-color: rgb(163, 245, 163);"></td><td style="background-color: rgb(173, 235, 173);"></td><td style="background-color: rgb(184, 224, 184);"></td><td style="background-color: rgb(194, 214, 194);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(102, 255, 102);"></td><td style="background-color: rgb(117, 240, 117);"></td><td style="background-color: rgb(133, 224, 133);"></td><td style="background-color: rgb(148, 209, 148);"></td><td style="background-color: rgb(163, 194, 163);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(51, 255, 51);"></td><td style="background-color: rgb(71, 235, 71);"></td><td style="background-color: rgb(92, 214, 92);"></td><td style="background-color: rgb(112, 194, 112);"></td><td style="background-color: rgb(133, 173, 133);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(0, 255, 0);"></td><td style="background-color: rgb(26, 230, 26);"></td><td style="background-color: rgb(51, 204, 51);"></td><td style="background-color: rgb(77, 179, 77);"></td><td style="background-color: rgb(102, 153, 102);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(0, 204, 0);"></td><td style="background-color: rgb(20, 184, 20);"></td><td style="background-color: rgb(41, 163, 41);"></td><td style="background-color: rgb(61, 143, 61);"></td><td style="background-color: rgb(82, 122, 82);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(0, 153, 0);"></td><td style="background-color: rgb(15, 138, 15);"></td><td style="background-color: rgb(31, 122, 31);"></td><td style="background-color: rgb(46, 107, 46);"></td><td style="background-color: rgb(61, 92, 61);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(0, 102, 0);"></td><td style="background-color: rgb(10, 92, 10);"></td><td style="background-color: rgb(20, 82, 20);"></td><td style="background-color: rgb(31, 71, 31);"></td><td style="background-color: rgb(41, 61, 41);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(0, 51, 0);"></td><td style="background-color: rgb(5, 46, 5);"></td><td style="background-color: rgb(10, 41, 10);"></td><td style="background-color: rgb(15, 36, 15);"></td><td style="background-color: rgb(20, 31, 20);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">150° Green-Cyans</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(204, 255, 230);"></td><td style="background-color: rgb(209, 250, 230);"></td><td style="background-color: rgb(214, 245, 230);"></td><td style="background-color: rgb(219, 240, 230);"></td><td style="background-color: rgb(224, 235, 230);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(153, 255, 204);"></td><td style="background-color: rgb(163, 245, 204);"></td><td style="background-color: rgb(173, 235, 204);"></td><td style="background-color: rgb(184, 224, 204);"></td><td style="background-color: rgb(194, 214, 204);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(102, 255, 179);"></td><td style="background-color: rgb(117, 240, 179);"></td><td style="background-color: rgb(133, 224, 179);"></td><td style="background-color: rgb(148, 209, 179);"></td><td style="background-color: rgb(163, 194, 179);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(51, 255, 153);"></td><td style="background-color: rgb(71, 235, 153);"></td><td style="background-color: rgb(92, 214, 153);"></td><td style="background-color: rgb(112, 194, 153);"></td><td style="background-color: rgb(133, 173, 153);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(0, 255, 128);"></td><td style="background-color: rgb(26, 230, 128);"></td><td style="background-color: rgb(51, 204, 128);"></td><td style="background-color: rgb(77, 179, 128);"></td><td style="background-color: rgb(102, 153, 128);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(0, 204, 102);"></td><td style="background-color: rgb(20, 184, 102);"></td><td style="background-color: rgb(41, 163, 102);"></td><td style="background-color: rgb(61, 143, 102);"></td><td style="background-color: rgb(82, 122, 102);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(0, 153, 77);"></td><td style="background-color: rgb(15, 138, 77);"></td><td style="background-color: rgb(31, 122, 77);"></td><td style="background-color: rgb(46, 107, 77);"></td><td style="background-color: rgb(61, 92, 77);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(0, 102, 51);"></td><td style="background-color: rgb(10, 92, 51);"></td><td style="background-color: rgb(20, 82, 51);"></td><td style="background-color: rgb(31, 71, 51);"></td><td style="background-color: rgb(41, 61, 51);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(0, 51, 26);"></td><td style="background-color: rgb(5, 46, 26);"></td><td style="background-color: rgb(10, 41, 26);"></td><td style="background-color: rgb(15, 36, 26);"></td><td style="background-color: rgb(20, 31, 26);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">180° Cyans</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(204, 255, 255);"></td><td style="background-color: rgb(209, 250, 250);"></td><td style="background-color: rgb(214, 245, 245);"></td><td style="background-color: rgb(219, 240, 240);"></td><td style="background-color: rgb(224, 235, 235);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(153, 255, 255);"></td><td style="background-color: rgb(163, 245, 245);"></td><td style="background-color: rgb(173, 235, 235);"></td><td style="background-color: rgb(184, 224, 224);"></td><td style="background-color: rgb(194, 214, 214);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(102, 255, 255);"></td><td style="background-color: rgb(117, 240, 240);"></td><td style="background-color: rgb(133, 224, 224);"></td><td style="background-color: rgb(148, 209, 209);"></td><td style="background-color: rgb(163, 194, 194);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(51, 255, 255);"></td><td style="background-color: rgb(71, 235, 235);"></td><td style="background-color: rgb(92, 214, 214);"></td><td style="background-color: rgb(112, 194, 194);"></td><td style="background-color: rgb(133, 173, 173);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(0, 255, 255);"></td><td style="background-color: rgb(26, 230, 230);"></td><td style="background-color: rgb(51, 204, 204);"></td><td style="background-color: rgb(77, 179, 179);"></td><td style="background-color: rgb(102, 153, 153);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(0, 204, 204);"></td><td style="background-color: rgb(20, 184, 184);"></td><td style="background-color: rgb(41, 163, 163);"></td><td style="background-color: rgb(61, 143, 143);"></td><td style="background-color: rgb(82, 122, 122);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(0, 153, 153);"></td><td style="background-color: rgb(15, 138, 138);"></td><td style="background-color: rgb(31, 122, 122);"></td><td style="background-color: rgb(46, 107, 107);"></td><td style="background-color: rgb(61, 92, 92);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(0, 102, 102);"></td><td style="background-color: rgb(10, 92, 92);"></td><td style="background-color: rgb(20, 82, 82);"></td><td style="background-color: rgb(31, 71, 71);"></td><td style="background-color: rgb(41, 61, 61);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(0, 51, 51);"></td><td style="background-color: rgb(5, 46, 46);"></td><td style="background-color: rgb(10, 41, 41);"></td><td style="background-color: rgb(15, 36, 36);"></td><td style="background-color: rgb(20, 31, 31);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">210° Cyan-Blues</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(204, 230, 255);"></td><td style="background-color: rgb(209, 230, 250);"></td><td style="background-color: rgb(214, 230, 245);"></td><td style="background-color: rgb(219, 230, 240);"></td><td style="background-color: rgb(224, 230, 235);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(153, 204, 255);"></td><td style="background-color: rgb(163, 204, 245);"></td><td style="background-color: rgb(173, 204, 235);"></td><td style="background-color: rgb(184, 204, 224);"></td><td style="background-color: rgb(194, 204, 214);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(102, 179, 255);"></td><td style="background-color: rgb(117, 179, 240);"></td><td style="background-color: rgb(133, 179, 224);"></td><td style="background-color: rgb(148, 179, 209);"></td><td style="background-color: rgb(163, 179, 194);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(51, 153, 255);"></td><td style="background-color: rgb(71, 153, 235);"></td><td style="background-color: rgb(92, 153, 214);"></td><td style="background-color: rgb(112, 153, 194);"></td><td style="background-color: rgb(133, 153, 173);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(0, 128, 255);"></td><td style="background-color: rgb(26, 128, 230);"></td><td style="background-color: rgb(51, 128, 204);"></td><td style="background-color: rgb(77, 128, 179);"></td><td style="background-color: rgb(102, 128, 153);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(0, 102, 204);"></td><td style="background-color: rgb(20, 102, 184);"></td><td style="background-color: rgb(41, 102, 163);"></td><td style="background-color: rgb(61, 102, 143);"></td><td style="background-color: rgb(82, 102, 122);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(0, 77, 153);"></td><td style="background-color: rgb(15, 77, 138);"></td><td style="background-color: rgb(31, 77, 122);"></td><td style="background-color: rgb(46, 77, 107);"></td><td style="background-color: rgb(61, 77, 92);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(0, 51, 102);"></td><td style="background-color: rgb(10, 51, 92);"></td><td style="background-color: rgb(20, 51, 82);"></td><td style="background-color: rgb(31, 51, 71);"></td><td style="background-color: rgb(41, 51, 61);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(0, 26, 51);"></td><td style="background-color: rgb(5, 26, 46);"></td><td style="background-color: rgb(10, 26, 41);"></td><td style="background-color: rgb(15, 26, 36);"></td><td style="background-color: rgb(20, 26, 31);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">240° blues</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(204, 204, 255);"></td><td style="background-color: rgb(209, 209, 250);"></td><td style="background-color: rgb(214, 214, 245);"></td><td style="background-color: rgb(219, 219, 240);"></td><td style="background-color: rgb(224, 224, 235);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(153, 153, 255);"></td><td style="background-color: rgb(163, 163, 245);"></td><td style="background-color: rgb(173, 173, 235);"></td><td style="background-color: rgb(184, 184, 224);"></td><td style="background-color: rgb(194, 194, 214);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(102, 102, 255);"></td><td style="background-color: rgb(117, 117, 240);"></td><td style="background-color: rgb(133, 133, 224);"></td><td style="background-color: rgb(148, 148, 209);"></td><td style="background-color: rgb(163, 163, 194);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(51, 51, 255);"></td><td style="background-color: rgb(71, 71, 235);"></td><td style="background-color: rgb(92, 92, 214);"></td><td style="background-color: rgb(112, 112, 194);"></td><td style="background-color: rgb(133, 133, 173);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(0, 0, 255);"></td><td style="background-color: rgb(26, 26, 230);"></td><td style="background-color: rgb(51, 51, 204);"></td><td style="background-color: rgb(77, 77, 179);"></td><td style="background-color: rgb(102, 102, 153);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(0, 0, 204);"></td><td style="background-color: rgb(20, 20, 184);"></td><td style="background-color: rgb(41, 41, 163);"></td><td style="background-color: rgb(61, 61, 143);"></td><td style="background-color: rgb(82, 82, 122);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(0, 0, 153);"></td><td style="background-color: rgb(15, 15, 138);"></td><td style="background-color: rgb(31, 31, 122);"></td><td style="background-color: rgb(46, 46, 107);"></td><td style="background-color: rgb(61, 61, 92);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(0, 0, 102);"></td><td style="background-color: rgb(10, 10, 92);"></td><td style="background-color: rgb(20, 20, 82);"></td><td style="background-color: rgb(31, 31, 71);"></td><td style="background-color: rgb(41, 41, 61);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(0, 0, 51);"></td><td style="background-color: rgb(5, 5, 46);"></td><td style="background-color: rgb(10, 10, 41);"></td><td style="background-color: rgb(15, 15, 36);"></td><td style="background-color: rgb(20, 20, 31);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">270° Blue-Magentas</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(230, 204, 255);"></td><td style="background-color: rgb(230, 209, 250);"></td><td style="background-color: rgb(230, 214, 245);"></td><td style="background-color: rgb(230, 219, 240);"></td><td style="background-color: rgb(230, 224, 235);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(204, 153, 255);"></td><td style="background-color: rgb(204, 163, 245);"></td><td style="background-color: rgb(204, 173, 235);"></td><td style="background-color: rgb(204, 184, 224);"></td><td style="background-color: rgb(204, 194, 214);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(179, 102, 255);"></td><td style="background-color: rgb(179, 117, 240);"></td><td style="background-color: rgb(179, 133, 224);"></td><td style="background-color: rgb(179, 148, 209);"></td><td style="background-color: rgb(179, 163, 194);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(153, 51, 255);"></td><td style="background-color: rgb(153, 71, 235);"></td><td style="background-color: rgb(153, 92, 214);"></td><td style="background-color: rgb(153, 112, 194);"></td><td style="background-color: rgb(153, 133, 173);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(128, 0, 255);"></td><td style="background-color: rgb(128, 26, 230);"></td><td style="background-color: rgb(128, 51, 204);"></td><td style="background-color: rgb(128, 77, 179);"></td><td style="background-color: rgb(128, 102, 153);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(102, 0, 204);"></td><td style="background-color: rgb(102, 20, 184);"></td><td style="background-color: rgb(102, 41, 163);"></td><td style="background-color: rgb(102, 61, 143);"></td><td style="background-color: rgb(102, 82, 122);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(77, 0, 153);"></td><td style="background-color: rgb(77, 15, 138);"></td><td style="background-color: rgb(77, 31, 122);"></td><td style="background-color: rgb(77, 46, 107);"></td><td style="background-color: rgb(77, 61, 92);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(51, 0, 102);"></td><td style="background-color: rgb(51, 10, 92);"></td><td style="background-color: rgb(51, 20, 82);"></td><td style="background-color: rgb(51, 31, 71);"></td><td style="background-color: rgb(51, 41, 61);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(26, 0, 51);"></td><td style="background-color: rgb(26, 5, 46);"></td><td style="background-color: rgb(26, 10, 41);"></td><td style="background-color: rgb(26, 15, 36);"></td><td style="background-color: rgb(26, 20, 31);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">300° Magentas</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(255, 204, 255);"></td><td style="background-color: rgb(250, 209, 250);"></td><td style="background-color: rgb(245, 214, 245);"></td><td style="background-color: rgb(240, 219, 240);"></td><td style="background-color: rgb(235, 224, 235);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(255, 153, 255);"></td><td style="background-color: rgb(245, 163, 245);"></td><td style="background-color: rgb(235, 173, 235);"></td><td style="background-color: rgb(224, 184, 224);"></td><td style="background-color: rgb(214, 194, 214);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(255, 102, 255);"></td><td style="background-color: rgb(240, 117, 240);"></td><td style="background-color: rgb(224, 133, 224);"></td><td style="background-color: rgb(209, 148, 209);"></td><td style="background-color: rgb(194, 163, 194);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(255, 51, 255);"></td><td style="background-color: rgb(235, 71, 235);"></td><td style="background-color: rgb(214, 92, 214);"></td><td style="background-color: rgb(194, 112, 194);"></td><td style="background-color: rgb(173, 133, 173);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(255, 0, 255);"></td><td style="background-color: rgb(230, 26, 230);"></td><td style="background-color: rgb(204, 51, 204);"></td><td style="background-color: rgb(179, 77, 179);"></td><td style="background-color: rgb(153, 102, 153);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(204, 0, 204);"></td><td style="background-color: rgb(184, 20, 184);"></td><td style="background-color: rgb(163, 41, 163);"></td><td style="background-color: rgb(143, 61, 143);"></td><td style="background-color: rgb(122, 82, 122);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(153, 0, 153);"></td><td style="background-color: rgb(138, 15, 138);"></td><td style="background-color: rgb(122, 31, 122);"></td><td style="background-color: rgb(107, 46, 107);"></td><td style="background-color: rgb(92, 61, 92);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(102, 0, 102);"></td><td style="background-color: rgb(92, 10, 92);"></td><td style="background-color: rgb(82, 20, 82);"></td><td style="background-color: rgb(71, 31, 71);"></td><td style="background-color: rgb(61, 41, 61);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(51, 0, 51);"></td><td style="background-color: rgb(46, 5, 46);"></td><td style="background-color: rgb(41, 10, 41);"></td><td style="background-color: rgb(36, 15, 36);"></td><td style="background-color: rgb(31, 20, 31);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table><table><thead>
				<tr>
					<th colspan="7">330° Magenta-Reds</th>
				</tr>
				<tr>
					<th></th>
				<th>100%</th><th>80%</th><th>60%</th><th>40%</th><th>20%</th><th>0%</th></tr>
			</thead><tr><th>100%</th><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td><td style="background-color: rgb(255, 255, 255);"></td></tr><tr><th>90%</th><td style="background-color: rgb(255, 204, 230);"></td><td style="background-color: rgb(250, 209, 230);"></td><td style="background-color: rgb(245, 214, 230);"></td><td style="background-color: rgb(240, 219, 230);"></td><td style="background-color: rgb(235, 224, 230);"></td><td style="background-color: rgb(230, 230, 230);"></td></tr><tr><th>80%</th><td style="background-color: rgb(255, 153, 204);"></td><td style="background-color: rgb(245, 163, 204);"></td><td style="background-color: rgb(235, 173, 204);"></td><td style="background-color: rgb(224, 184, 204);"></td><td style="background-color: rgb(214, 194, 204);"></td><td style="background-color: rgb(204, 204, 204);"></td></tr><tr><th>70%</th><td style="background-color: rgb(255, 102, 179);"></td><td style="background-color: rgb(240, 117, 179);"></td><td style="background-color: rgb(224, 133, 179);"></td><td style="background-color: rgb(209, 148, 179);"></td><td style="background-color: rgb(194, 163, 179);"></td><td style="background-color: rgb(179, 179, 179);"></td></tr><tr><th>60%</th><td style="background-color: rgb(255, 51, 153);"></td><td style="background-color: rgb(235, 71, 153);"></td><td style="background-color: rgb(214, 92, 153);"></td><td style="background-color: rgb(194, 112, 153);"></td><td style="background-color: rgb(173, 133, 153);"></td><td style="background-color: rgb(153, 153, 153);"></td></tr><tr><th>50%</th><td style="background-color: rgb(255, 0, 128);"></td><td style="background-color: rgb(230, 26, 128);"></td><td style="background-color: rgb(204, 51, 128);"></td><td style="background-color: rgb(179, 77, 128);"></td><td style="background-color: rgb(153, 102, 128);"></td><td style="background-color: rgb(128, 128, 128);"></td></tr><tr><th>40%</th><td style="background-color: rgb(204, 0, 102);"></td><td style="background-color: rgb(184, 20, 102);"></td><td style="background-color: rgb(163, 41, 102);"></td><td style="background-color: rgb(143, 61, 102);"></td><td style="background-color: rgb(122, 82, 102);"></td><td style="background-color: rgb(102, 102, 102);"></td></tr><tr><th>30%</th><td style="background-color: rgb(153, 0, 77);"></td><td style="background-color: rgb(138, 15, 77);"></td><td style="background-color: rgb(122, 31, 77);"></td><td style="background-color: rgb(107, 46, 77);"></td><td style="background-color: rgb(92, 61, 77);"></td><td style="background-color: rgb(77, 77, 77);"></td></tr><tr><th>20%</th><td style="background-color: rgb(102, 0, 51);"></td><td style="background-color: rgb(92, 10, 51);"></td><td style="background-color: rgb(82, 20, 51);"></td><td style="background-color: rgb(71, 31, 51);"></td><td style="background-color: rgb(61, 41, 51);"></td><td style="background-color: rgb(51, 51, 51);"></td></tr><tr><th>10%</th><td style="background-color: rgb(51, 0, 26);"></td><td style="background-color: rgb(46, 5, 26);"></td><td style="background-color: rgb(41, 10, 26);"></td><td style="background-color: rgb(36, 15, 26);"></td><td style="background-color: rgb(31, 20, 26);"></td><td style="background-color: rgb(26, 26, 26);"></td></tr><tr><th>0%</th><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td><td style="background-color: rgb(0, 0, 0);"></td></tr></table>
		</div>


  <h4 id=hsla-color style="margin-top:2em"><span class=secno>4.2.5.
   </span>HSLA color values</h4>

  <p><span class=index-def id=hsla-def title="hsla()">Just as the ‘<code
   class=css>rgb()</code>’ functional notation has the ‘<code
   class=css>rgba()</code>’ alpha counterpart, the ‘<code
   class=css>hsl()</code>’ functional notation has the ‘<code
   class=css>hsla()</code>’ alpha counterpart.</span> See <a
   href="#alpha">simple alpha compositing</a> for details. These examples
   specify the same color:

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
em { color: hsl(120, 100%, 50%) }     /* green */
em { color: hsla(120, 100%, 50%, 1) } /* the same, with explicit opacity of 1 */
</pre>
  </div>

  <p>The format of an HSLA color value in the functional notation is ‘<code
   class=css>hsla(</code>’ followed by the hue in degrees, saturation and
   lightness as a percentage, and an <a class=index-inst href="#alphavaluedt"
   id=ltalphavaluegt0>&lt;alphavalue&gt;</a>, followed by ‘<code
   class=css>)</code>’. White space characters are allowed around the
   numerical values.

  <p>Implementations must clip the hue, saturation, and lightness components
   of HSLA color values to the device gamut according to the rules for the
   HSL color value composed of those components.

  <p>These examples specify effects that are possible with the hsla()
   notation:

  <div class=example>
   <p style="display:none">Example(s):

   <pre>
p { color: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
p { color: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */
</pre>
  </div>

  <h3 id=svg-color><span class=secno>4.3. </span>Extended color keywords</h3>

  <p>The table below provides a list of the X11 colors <a
   href="#ref-X11COLORS">[X11COLORS]<!--{{X11COLORS}}--></a> supported by
   popular browsers with the addition of gray/grey variants from SVG 1.0. The
   resulting list is precisely the same as the <a
   href="https://www.w3.org/TR/SVG11/types.html#ColorKeywords">SVG 1.0 color
   keyword names</a>. This specification extends their definition beyond SVG.
   The two color swatches on the left illustrate setting the background color
   of a table cell in two ways: The first column uses the named color value,
   and the second column uses the respective numeric color value.

  <table class=colortable>
   <tbody>
    <tr>
     <th style="background:black">Named

     <th>Numeric

     <th>Color name

     <th>Hex rgb

     <th>Decimal

    <tr>
     <td class=c style="background:aliceblue">

     <td class=c style="background:#f0f8ff">

     <td><dfn id=aliceblue>aliceblue</dfn>

     <td class=c style="background:silver">#f0f8ff

     <td class=c style="background:silver">240,248,255

    <tr>
     <td class=c style="background:antiquewhite">

     <td class=c style="background:#faebd7">

     <td><dfn id=antiquewhite>antiquewhite</dfn>

     <td class=c style="background:silver">#faebd7

     <td class=c style="background:silver">250,235,215

    <tr>
     <td class=c style="background:aqua">

     <td class=c style="background:#00ffff">

     <td><dfn id=aqua0>aqua</dfn>

     <td class=c style="background:silver">#00ffff

     <td class=c style="background:silver">0,255,255

    <tr>
     <td class=c style="background:aquamarine">

     <td class=c style="background:#7fffd4">

     <td><dfn id=aquamarine>aquamarine</dfn>

     <td class=c style="background:silver">#7fffd4

     <td class=c style="background:silver">127,255,212

    <tr>
     <td class=c style="background:azure">

     <td class=c style="background:#f0ffff">

     <td><dfn id=azure>azure</dfn>

     <td class=c style="background:silver">#f0ffff

     <td class=c style="background:silver">240,255,255

    <tr>
     <td class=c style="background:beige">

     <td class=c style="background:#f5f5dc">

     <td><dfn id=beige>beige</dfn>

     <td class=c style="background:silver">#f5f5dc

     <td class=c style="background:silver">245,245,220

    <tr>
     <td class=c style="background:bisque">

     <td class=c style="background:#ffe4c4">

     <td><dfn id=bisque>bisque</dfn>

     <td class=c style="background:silver">#ffe4c4

     <td class=c style="background:silver">255,228,196

    <tr>
     <td class=c style="background:black">

     <td class=c style="background:#000000">

     <td><dfn id=black0>black</dfn>

     <td class=c style="background:silver">#000000

     <td class=c style="background:silver">0,0,0

    <tr>
     <td class=c style="background:blanchedalmond">

     <td class=c style="background:#ffebcd">

     <td><dfn id=blanchedalmond>blanchedalmond</dfn>

     <td class=c style="background:silver">#ffebcd

     <td class=c style="background:silver">255,235,205

    <tr>
     <td class=c style="background:blue">

     <td class=c style="background:#0000ff">

     <td><dfn id=blue0>blue</dfn>

     <td class=c style="background:silver">#0000ff

     <td class=c style="background:silver">0,0,255

    <tr>
     <td class=c style="background:blueviolet">

     <td class=c style="background:#8a2be2">

     <td><dfn id=blueviolet>blueviolet</dfn>

     <td class=c style="background:silver">#8a2be2

     <td class=c style="background:silver">138,43,226

    <tr>
     <td class=c style="background:brown">

     <td class=c style="background:#a52a2a">

     <td><dfn id=brown>brown</dfn>

     <td class=c style="background:silver">#a52a2a

     <td class=c style="background:silver">165,42,42

    <tr>
     <td class=c style="background:burlywood">

     <td class=c style="background:#deb887">

     <td><dfn id=burlywood>burlywood</dfn>

     <td class=c style="background:silver">#deb887

     <td class=c style="background:silver">222,184,135

    <tr>
     <td class=c style="background:cadetblue">

     <td class=c style="background:#5f9ea0">

     <td><dfn id=cadetblue>cadetblue</dfn>

     <td class=c style="background:silver">#5f9ea0

     <td class=c style="background:silver">95,158,160

    <tr>
     <td class=c style="background:chartreuse">

     <td class=c style="background:#7fff00">

     <td><dfn id=chartreuse>chartreuse</dfn>

     <td class=c style="background:silver">#7fff00

     <td class=c style="background:silver">127,255,0

    <tr>
     <td class=c style="background:chocolate">

     <td class=c style="background:#d2691e">

     <td><dfn id=chocolate>chocolate</dfn>

     <td class=c style="background:silver">#d2691e

     <td class=c style="background:silver">210,105,30

    <tr>
     <td class=c style="background:coral">

     <td class=c style="background:#ff7f50">

     <td><dfn id=coral>coral</dfn>

     <td class=c style="background:silver">#ff7f50

     <td class=c style="background:silver">255,127,80

    <tr>
     <td class=c style="background:cornflowerblue">

     <td class=c style="background:#6495ed">

     <td><dfn id=cornflowerblue>cornflowerblue</dfn>

     <td class=c style="background:silver">#6495ed

     <td class=c style="background:silver">100,149,237

    <tr>
     <td class=c style="background:cornsilk">

     <td class=c style="background:#fff8dc">

     <td><dfn id=cornsilk>cornsilk</dfn>

     <td class=c style="background:silver">#fff8dc

     <td class=c style="background:silver">255,248,220

    <tr>
     <td class=c style="background:crimson">

     <td class=c style="background:#dc143c">

     <td><dfn id=crimson>crimson</dfn>

     <td class=c style="background:silver">#dc143c

     <td class=c style="background:silver">220,20,60

    <tr>
     <td class=c style="background:cyan">

     <td class=c style="background:#00ffff">

     <td><dfn id=cyan>cyan</dfn>

     <td class=c style="background:silver">#00ffff

     <td class=c style="background:silver">0,255,255

    <tr>
     <td class=c style="background:darkblue">

     <td class=c style="background:#00008b">

     <td><dfn id=darkblue>darkblue</dfn>

     <td class=c style="background:silver">#00008b

     <td class=c style="background:silver">0,0,139

    <tr>
     <td class=c style="background:darkcyan">

     <td class=c style="background:#008b8b">

     <td><dfn id=darkcyan>darkcyan</dfn>

     <td class=c style="background:silver">#008b8b

     <td class=c style="background:silver">0,139,139

    <tr>
     <td class=c style="background:darkgoldenrod">

     <td class=c style="background:#b8860b">

     <td><dfn id=darkgoldenrod>darkgoldenrod</dfn>

     <td class=c style="background:silver">#b8860b

     <td class=c style="background:silver">184,134,11

    <tr>
     <td class=c style="background:darkgray">

     <td class=c style="background:#a9a9a9">

     <td><dfn id=darkgray>darkgray</dfn>

     <td class=c style="background:silver">#a9a9a9

     <td class=c style="background:silver">169,169,169

    <tr>
     <td class=c style="background:darkgreen">

     <td class=c style="background:#006400">

     <td><dfn id=darkgreen>darkgreen</dfn>

     <td class=c style="background:silver">#006400

     <td class=c style="background:silver">0,100,0

    <tr>
     <td class=c style="background:darkgrey">

     <td class=c style="background:#a9a9a9">

     <td><dfn id=darkgrey>darkgrey</dfn>

     <td class=c style="background:silver">#a9a9a9

     <td class=c style="background:silver">169,169,169

    <tr>
     <td class=c style="background:darkkhaki">

     <td class=c style="background:#bdb76b">

     <td><dfn id=darkkhaki>darkkhaki</dfn>

     <td class=c style="background:silver">#bdb76b

     <td class=c style="background:silver">189,183,107

    <tr>
     <td class=c style="background:darkmagenta">

     <td class=c style="background:#8b008b">

     <td><dfn id=darkmagenta>darkmagenta</dfn>

     <td class=c style="background:silver">#8b008b

     <td class=c style="background:silver">139,0,139

    <tr>
     <td class=c style="background:darkolivegreen">

     <td class=c style="background:#556b2f">

     <td><dfn id=darkolivegreen>darkolivegreen</dfn>

     <td class=c style="background:silver">#556b2f

     <td class=c style="background:silver">85,107,47

    <tr>
     <td class=c style="background:darkorange">

     <td class=c style="background:#ff8c00">

     <td><dfn id=darkorange>darkorange</dfn>

     <td class=c style="background:silver">#ff8c00

     <td class=c style="background:silver">255,140,0

    <tr>
     <td class=c style="background:darkorchid">

     <td class=c style="background:#9932cc">

     <td><dfn id=darkorchid>darkorchid</dfn>

     <td class=c style="background:silver">#9932cc

     <td class=c style="background:silver">153,50,204

    <tr>
     <td class=c style="background:darkred">

     <td class=c style="background:#8b0000">

     <td><dfn id=darkred>darkred</dfn>

     <td class=c style="background:silver">#8b0000

     <td class=c style="background:silver">139,0,0

    <tr>
     <td class=c style="background:darksalmon">

     <td class=c style="background:#e9967a">

     <td><dfn id=darksalmon>darksalmon</dfn>

     <td class=c style="background:silver">#e9967a

     <td class=c style="background:silver">233,150,122

    <tr>
     <td class=c style="background:darkseagreen">

     <td class=c style="background:#8fbc8f">

     <td><dfn id=darkseagreen>darkseagreen</dfn>

     <td class=c style="background:silver">#8fbc8f

     <td class=c style="background:silver">143,188,143

    <tr>
     <td class=c style="background:darkslateblue">

     <td class=c style="background:#483d8b">

     <td><dfn id=darkslateblue>darkslateblue</dfn>

     <td class=c style="background:silver">#483d8b

     <td class=c style="background:silver">72,61,139

    <tr>
     <td class=c style="background:darkslategray">

     <td class=c style="background:#2f4f4f">

     <td><dfn id=darkslategray>darkslategray</dfn>

     <td class=c style="background:silver">#2f4f4f

     <td class=c style="background:silver">47,79,79

    <tr>
     <td class=c style="background:darkslategrey">

     <td class=c style="background:#2f4f4f">

     <td><dfn id=darkslategrey>darkslategrey</dfn>

     <td class=c style="background:silver">#2f4f4f

     <td class=c style="background:silver">47,79,79

    <tr>
     <td class=c style="background:darkturquoise">

     <td class=c style="background:#00ced1">

     <td><dfn id=darkturquoise>darkturquoise</dfn>

     <td class=c style="background:silver">#00ced1

     <td class=c style="background:silver">0,206,209

    <tr>
     <td class=c style="background:darkviolet">

     <td class=c style="background:#9400d3">

     <td><dfn id=darkviolet>darkviolet</dfn>

     <td class=c style="background:silver">#9400d3

     <td class=c style="background:silver">148,0,211

    <tr>
     <td class=c style="background:deeppink">

     <td class=c style="background:#ff1493">

     <td><dfn id=deeppink>deeppink</dfn>

     <td class=c style="background:silver">#ff1493

     <td class=c style="background:silver">255,20,147

    <tr>
     <td class=c style="background:deepskyblue">

     <td class=c style="background:#00bfff">

     <td><dfn id=deepskyblue>deepskyblue</dfn>

     <td class=c style="background:silver">#00bfff

     <td class=c style="background:silver">0,191,255

    <tr>
     <td class=c style="background:dimgray">

     <td class=c style="background:#696969">

     <td><dfn id=dimgray>dimgray</dfn>

     <td class=c style="background:silver">#696969

     <td class=c style="background:silver">105,105,105

    <tr>
     <td class=c style="background:dimgrey">

     <td class=c style="background:#696969">

     <td><dfn id=dimgrey>dimgrey</dfn>

     <td class=c style="background:silver">#696969

     <td class=c style="background:silver">105,105,105

    <tr>
     <td class=c style="background:dodgerblue">

     <td class=c style="background:#1e90ff">

     <td><dfn id=dodgerblue>dodgerblue</dfn>

     <td class=c style="background:silver">#1e90ff

     <td class=c style="background:silver">30,144,255

    <tr>
     <td class=c style="background:firebrick">

     <td class=c style="background:#b22222">

     <td><dfn id=firebrick>firebrick</dfn>

     <td class=c style="background:silver">#b22222

     <td class=c style="background:silver">178,34,34

    <tr>
     <td class=c style="background:floralwhite">

     <td class=c style="background:#fffaf0">

     <td><dfn id=floralwhite>floralwhite</dfn>

     <td class=c style="background:silver">#fffaf0

     <td class=c style="background:silver">255,250,240

    <tr>
     <td class=c style="background:forestgreen">

     <td class=c style="background:#228b22">

     <td><dfn id=forestgreen>forestgreen</dfn>

     <td class=c style="background:silver">#228b22

     <td class=c style="background:silver">34,139,34

    <tr>
     <td class=c style="background:fuchsia">

     <td class=c style="background:#ff00ff">

     <td><dfn id=fuchsia0>fuchsia</dfn>

     <td class=c style="background:silver">#ff00ff

     <td class=c style="background:silver">255,0,255

    <tr>
     <td class=c style="background:gainsboro">

     <td class=c style="background:#dcdcdc">

     <td><dfn id=gainsboro>gainsboro</dfn>

     <td class=c style="background:silver">#dcdcdc

     <td class=c style="background:silver">220,220,220

    <tr>
     <td class=c style="background:ghostwhite">

     <td class=c style="background:#f8f8ff">

     <td><dfn id=ghostwhite>ghostwhite</dfn>

     <td class=c style="background:silver">#f8f8ff

     <td class=c style="background:silver">248,248,255

    <tr>
     <td class=c style="background:gold">

     <td class=c style="background:#ffd700">

     <td><dfn id=gold>gold</dfn>

     <td class=c style="background:silver">#ffd700

     <td class=c style="background:silver">255,215,0

    <tr>
     <td class=c style="background:goldenrod">

     <td class=c style="background:#daa520">

     <td><dfn id=goldenrod>goldenrod</dfn>

     <td class=c style="background:silver">#daa520

     <td class=c style="background:silver">218,165,32

    <tr>
     <td class=c style="background:gray">

     <td class=c style="background:#808080">

     <td><dfn id=gray0>gray</dfn>

     <td class=c style="background:silver">#808080

     <td class=c style="background:silver">128,128,128

    <tr>
     <td class=c style="background:green">

     <td class=c style="background:#008000">

     <td><dfn id=green0>green</dfn>

     <td class=c style="background:silver">#008000

     <td class=c style="background:silver">0,128,0

    <tr>
     <td class=c style="background:greenyellow">

     <td class=c style="background:#adff2f">

     <td><dfn id=greenyellow>greenyellow</dfn>

     <td class=c style="background:silver">#adff2f

     <td class=c style="background:silver">173,255,47

    <tr>
     <td class=c style="background:grey">

     <td class=c style="background:#808080">

     <td><dfn id=grey>grey</dfn>

     <td class=c style="background:silver">#808080

     <td class=c style="background:silver">128,128,128

    <tr>
     <td class=c style="background:honeydew">

     <td class=c style="background:#f0fff0">

     <td><dfn id=honeydew>honeydew</dfn>

     <td class=c style="background:silver">#f0fff0

     <td class=c style="background:silver">240,255,240

    <tr>
     <td class=c style="background:hotpink">

     <td class=c style="background:#ff69b4">

     <td><dfn id=hotpink>hotpink</dfn>

     <td class=c style="background:silver">#ff69b4

     <td class=c style="background:silver">255,105,180

    <tr>
     <td class=c style="background:indianred">

     <td class=c style="background:#cd5c5c">

     <td><dfn id=indianred>indianred</dfn>

     <td class=c style="background:silver">#cd5c5c

     <td class=c style="background:silver">205,92,92

    <tr>
     <td class=c style="background:indigo">

     <td class=c style="background:#4b0082">

     <td><dfn id=indigo>indigo</dfn>

     <td class=c style="background:silver">#4b0082

     <td class=c style="background:silver">75,0,130

    <tr>
     <td class=c style="background:ivory">

     <td class=c style="background:#fffff0">

     <td><dfn id=ivory>ivory</dfn>

     <td class=c style="background:silver">#fffff0

     <td class=c style="background:silver">255,255,240

    <tr>
     <td class=c style="background:khaki">

     <td class=c style="background:#f0e68c">

     <td><dfn id=khaki>khaki</dfn>

     <td class=c style="background:silver">#f0e68c

     <td class=c style="background:silver">240,230,140

    <tr>
     <td class=c style="background:lavender">

     <td class=c style="background:#e6e6fa">

     <td><dfn id=lavender>lavender</dfn>

     <td class=c style="background:silver">#e6e6fa

     <td class=c style="background:silver">230,230,250

    <tr>
     <td class=c style="background:lavenderblush">

     <td class=c style="background:#fff0f5">

     <td><dfn id=lavenderblush>lavenderblush</dfn>

     <td class=c style="background:silver">#fff0f5

     <td class=c style="background:silver">255,240,245

    <tr>
     <td class=c style="background:lawngreen">

     <td class=c style="background:#7cfc00">

     <td><dfn id=lawngreen>lawngreen</dfn>

     <td class=c style="background:silver">#7cfc00

     <td class=c style="background:silver">124,252,0

    <tr>
     <td class=c style="background:lemonchiffon">

     <td class=c style="background:#fffacd">

     <td><dfn id=lemonchiffon>lemonchiffon</dfn>

     <td class=c style="background:silver">#fffacd

     <td class=c style="background:silver">255,250,205

    <tr>
     <td class=c style="background:lightblue">

     <td class=c style="background:#add8e6">

     <td><dfn id=lightblue>lightblue</dfn>

     <td class=c style="background:silver">#add8e6

     <td class=c style="background:silver">173,216,230

    <tr>
     <td class=c style="background:lightcoral">

     <td class=c style="background:#f08080">

     <td><dfn id=lightcoral>lightcoral</dfn>

     <td class=c style="background:silver">#f08080

     <td class=c style="background:silver">240,128,128

    <tr>
     <td class=c style="background:lightcyan">

     <td class=c style="background:#e0ffff">

     <td><dfn id=lightcyan>lightcyan</dfn>

     <td class=c style="background:silver">#e0ffff

     <td class=c style="background:silver">224,255,255

    <tr>
     <td class=c style="background:lightgoldenrodyellow">

     <td class=c style="background:#fafad2">

     <td><dfn id=lightgoldenrodyellow>lightgoldenrodyellow</dfn>

     <td class=c style="background:silver">#fafad2

     <td class=c style="background:silver">250,250,210

    <tr>
     <td class=c style="background:lightgray">

     <td class=c style="background:#d3d3d3">

     <td><dfn id=lightgray>lightgray</dfn>

     <td class=c style="background:silver">#d3d3d3

     <td class=c style="background:silver">211,211,211

    <tr>
     <td class=c style="background:lightgreen">

     <td class=c style="background:#90ee90">

     <td><dfn id=lightgreen>lightgreen</dfn>

     <td class=c style="background:silver">#90ee90

     <td class=c style="background:silver">144,238,144

    <tr>
     <td class=c style="background:lightgrey">

     <td class=c style="background:#d3d3d3">

     <td><dfn id=lightgrey>lightgrey</dfn>

     <td class=c style="background:silver">#d3d3d3

     <td class=c style="background:silver">211,211,211

    <tr>
     <td class=c style="background:lightpink">

     <td class=c style="background:#ffb6c1">

     <td><dfn id=lightpink>lightpink</dfn>

     <td class=c style="background:silver">#ffb6c1

     <td class=c style="background:silver">255,182,193

    <tr>
     <td class=c style="background:lightsalmon">

     <td class=c style="background:#ffa07a">

     <td><dfn id=lightsalmon>lightsalmon</dfn>

     <td class=c style="background:silver">#ffa07a

     <td class=c style="background:silver">255,160,122

    <tr>
     <td class=c style="background:lightseagreen">

     <td class=c style="background:#20b2aa">

     <td><dfn id=lightseagreen>lightseagreen</dfn>

     <td class=c style="background:silver">#20b2aa

     <td class=c style="background:silver">32,178,170

    <tr>
     <td class=c style="background:lightskyblue">

     <td class=c style="background:#87cefa">

     <td><dfn id=lightskyblue>lightskyblue</dfn>

     <td class=c style="background:silver">#87cefa

     <td class=c style="background:silver">135,206,250

    <tr>
     <td class=c style="background:lightslategray">

     <td class=c style="background:#778899">

     <td><dfn id=lightslategray>lightslategray</dfn>

     <td class=c style="background:silver">#778899

     <td class=c style="background:silver">119,136,153

    <tr>
     <td class=c style="background:lightslategrey">

     <td class=c style="background:#778899">

     <td><dfn id=lightslategrey>lightslategrey</dfn>

     <td class=c style="background:silver">#778899

     <td class=c style="background:silver">119,136,153

    <tr>
     <td class=c style="background:lightsteelblue">

     <td class=c style="background:#b0c4de">

     <td><dfn id=lightsteelblue>lightsteelblue</dfn>

     <td class=c style="background:silver">#b0c4de

     <td class=c style="background:silver">176,196,222

    <tr>
     <td class=c style="background:lightyellow">

     <td class=c style="background:#ffffe0">

     <td><dfn id=lightyellow>lightyellow</dfn>

     <td class=c style="background:silver">#ffffe0

     <td class=c style="background:silver">255,255,224

    <tr>
     <td class=c style="background:lime">

     <td class=c style="background:#00ff00">

     <td><dfn id=lime0>lime</dfn>

     <td class=c style="background:silver">#00ff00

     <td class=c style="background:silver">0,255,0

    <tr>
     <td class=c style="background:limegreen">

     <td class=c style="background:#32cd32">

     <td><dfn id=limegreen>limegreen</dfn>

     <td class=c style="background:silver">#32cd32

     <td class=c style="background:silver">50,205,50

    <tr>
     <td class=c style="background:linen">

     <td class=c style="background:#faf0e6">

     <td><dfn id=linen>linen</dfn>

     <td class=c style="background:silver">#faf0e6

     <td class=c style="background:silver">250,240,230

    <tr>
     <td class=c style="background:magenta">

     <td class=c style="background:#ff00ff">

     <td><dfn id=magenta>magenta</dfn>

     <td class=c style="background:silver">#ff00ff

     <td class=c style="background:silver">255,0,255

    <tr>
     <td class=c style="background:maroon">

     <td class=c style="background:#800000">

     <td><dfn id=maroon0>maroon</dfn>

     <td class=c style="background:silver">#800000

     <td class=c style="background:silver">128,0,0

    <tr>
     <td class=c style="background:mediumaquamarine">

     <td class=c style="background:#66cdaa">

     <td><dfn id=mediumaquamarine>mediumaquamarine</dfn>

     <td class=c style="background:silver">#66cdaa

     <td class=c style="background:silver">102,205,170

    <tr>
     <td class=c style="background:mediumblue">

     <td class=c style="background:#0000cd">

     <td><dfn id=mediumblue>mediumblue</dfn>

     <td class=c style="background:silver">#0000cd

     <td class=c style="background:silver">0,0,205

    <tr>
     <td class=c style="background:mediumorchid">

     <td class=c style="background:#ba55d3">

     <td><dfn id=mediumorchid>mediumorchid</dfn>

     <td class=c style="background:silver">#ba55d3

     <td class=c style="background:silver">186,85,211

    <tr>
     <td class=c style="background:mediumpurple">

     <td class=c style="background:#9370db">

     <td><dfn id=mediumpurple>mediumpurple</dfn>

     <td class=c style="background:silver">#9370db

     <td class=c style="background:silver">147,112,219

    <tr>
     <td class=c style="background:mediumseagreen">

     <td class=c style="background:#3cb371">

     <td><dfn id=mediumseagreen>mediumseagreen</dfn>

     <td class=c style="background:silver">#3cb371

     <td class=c style="background:silver">60,179,113

    <tr>
     <td class=c style="background:mediumslateblue">

     <td class=c style="background:#7b68ee">

     <td><dfn id=mediumslateblue>mediumslateblue</dfn>

     <td class=c style="background:silver">#7b68ee

     <td class=c style="background:silver">123,104,238

    <tr>
     <td class=c style="background:mediumspringgreen">

     <td class=c style="background:#00fa9a">

     <td><dfn id=mediumspringgreen>mediumspringgreen</dfn>

     <td class=c style="background:silver">#00fa9a

     <td class=c style="background:silver">0,250,154

    <tr>
     <td class=c style="background:mediumturquoise">

     <td class=c style="background:#48d1cc">

     <td><dfn id=mediumturquoise>mediumturquoise</dfn>

     <td class=c style="background:silver">#48d1cc

     <td class=c style="background:silver">72,209,204

    <tr>
     <td class=c style="background:mediumvioletred">

     <td class=c style="background:#c71585">

     <td><dfn id=mediumvioletred>mediumvioletred</dfn>

     <td class=c style="background:silver">#c71585

     <td class=c style="background:silver">199,21,133

    <tr>
     <td class=c style="background:midnightblue">

     <td class=c style="background:#191970">

     <td><dfn id=midnightblue>midnightblue</dfn>

     <td class=c style="background:silver">#191970

     <td class=c style="background:silver">25,25,112

    <tr>
     <td class=c style="background:mintcream">

     <td class=c style="background:#f5fffa">

     <td><dfn id=mintcream>mintcream</dfn>

     <td class=c style="background:silver">#f5fffa

     <td class=c style="background:silver">245,255,250

    <tr>
     <td class=c style="background:mistyrose">

     <td class=c style="background:#ffe4e1">

     <td><dfn id=mistyrose>mistyrose</dfn>

     <td class=c style="background:silver">#ffe4e1

     <td class=c style="background:silver">255,228,225

    <tr>
     <td class=c style="background:moccasin">

     <td class=c style="background:#ffe4b5">

     <td><dfn id=moccasin>moccasin</dfn>

     <td class=c style="background:silver">#ffe4b5

     <td class=c style="background:silver">255,228,181

    <tr>
     <td class=c style="background:navajowhite">

     <td class=c style="background:#ffdead">

     <td><dfn id=navajowhite>navajowhite</dfn>

     <td class=c style="background:silver">#ffdead

     <td class=c style="background:silver">255,222,173

    <tr>
     <td class=c style="background:navy">

     <td class=c style="background:#000080">

     <td><dfn id=navy0>navy</dfn>

     <td class=c style="background:silver">#000080

     <td class=c style="background:silver">0,0,128

    <tr>
     <td class=c style="background:oldlace">

     <td class=c style="background:#fdf5e6">

     <td><dfn id=oldlace>oldlace</dfn>

     <td class=c style="background:silver">#fdf5e6

     <td class=c style="background:silver">253,245,230

    <tr>
     <td class=c style="background:olive">

     <td class=c style="background:#808000">

     <td><dfn id=olive0>olive</dfn>

     <td class=c style="background:silver">#808000

     <td class=c style="background:silver">128,128,0

    <tr>
     <td class=c style="background:olivedrab">

     <td class=c style="background:#6b8e23">

     <td><dfn id=olivedrab>olivedrab</dfn>

     <td class=c style="background:silver">#6b8e23

     <td class=c style="background:silver">107,142,35

    <tr>
     <td class=c style="background:orange">

     <td class=c style="background:#ffa500">

     <td><dfn id=orange>orange</dfn>

     <td class=c style="background:silver">#ffa500

     <td class=c style="background:silver">255,165,0

    <tr>
     <td class=c style="background:orangered">

     <td class=c style="background:#ff4500">

     <td><dfn id=orangered>orangered</dfn>

     <td class=c style="background:silver">#ff4500

     <td class=c style="background:silver">255,69,0

    <tr>
     <td class=c style="background:orchid">

     <td class=c style="background:#da70d6">

     <td><dfn id=orchid>orchid</dfn>

     <td class=c style="background:silver">#da70d6

     <td class=c style="background:silver">218,112,214

    <tr>
     <td class=c style="background:palegoldenrod">

     <td class=c style="background:#eee8aa">

     <td><dfn id=palegoldenrod>palegoldenrod</dfn>

     <td class=c style="background:silver">#eee8aa

     <td class=c style="background:silver">238,232,170

    <tr>
     <td class=c style="background:palegreen">

     <td class=c style="background:#98fb98">

     <td><dfn id=palegreen>palegreen</dfn>

     <td class=c style="background:silver">#98fb98

     <td class=c style="background:silver">152,251,152

    <tr>
     <td class=c style="background:paleturquoise">

     <td class=c style="background:#afeeee">

     <td><dfn id=paleturquoise>paleturquoise</dfn>

     <td class=c style="background:silver">#afeeee

     <td class=c style="background:silver">175,238,238

    <tr>
     <td class=c style="background:palevioletred">

     <td class=c style="background:#db7093">

     <td><dfn id=palevioletred>palevioletred</dfn>

     <td class=c style="background:silver">#db7093

     <td class=c style="background:silver">219,112,147

    <tr>
     <td class=c style="background:papayawhip">

     <td class=c style="background:#ffefd5">

     <td><dfn id=papayawhip>papayawhip</dfn>

     <td class=c style="background:silver">#ffefd5

     <td class=c style="background:silver">255,239,213

    <tr>
     <td class=c style="background:peachpuff">

     <td class=c style="background:#ffdab9">

     <td><dfn id=peachpuff>peachpuff</dfn>

     <td class=c style="background:silver">#ffdab9

     <td class=c style="background:silver">255,218,185

    <tr>
     <td class=c style="background:peru">

     <td class=c style="background:#cd853f">

     <td><dfn id=peru>peru</dfn>

     <td class=c style="background:silver">#cd853f

     <td class=c style="background:silver">205,133,63

    <tr>
     <td class=c style="background:pink">

     <td class=c style="background:#ffc0cb">

     <td><dfn id=pink>pink</dfn>

     <td class=c style="background:silver">#ffc0cb

     <td class=c style="background:silver">255,192,203

    <tr>
     <td class=c style="background:plum">

     <td class=c style="background:#dda0dd">

     <td><dfn id=plum>plum</dfn>

     <td class=c style="background:silver">#dda0dd

     <td class=c style="background:silver">221,160,221

    <tr>
     <td class=c style="background:powderblue">

     <td class=c style="background:#b0e0e6">

     <td><dfn id=powderblue>powderblue</dfn>

     <td class=c style="background:silver">#b0e0e6

     <td class=c style="background:silver">176,224,230

    <tr>
     <td class=c style="background:purple">

     <td class=c style="background:#800080">

     <td><dfn id=purple0>purple</dfn>

     <td class=c style="background:silver">#800080

     <td class=c style="background:silver">128,0,128

    <tr>
     <td class=c style="background:red">

     <td class=c style="background:#ff0000">

     <td><dfn id=red0>red</dfn>

     <td class=c style="background:silver">#ff0000

     <td class=c style="background:silver">255,0,0

    <tr>
     <td class=c style="background:rosybrown">

     <td class=c style="background:#bc8f8f">

     <td><dfn id=rosybrown>rosybrown</dfn>

     <td class=c style="background:silver">#bc8f8f

     <td class=c style="background:silver">188,143,143

    <tr>
     <td class=c style="background:royalblue">

     <td class=c style="background:#4169e1">

     <td><dfn id=royalblue>royalblue</dfn>

     <td class=c style="background:silver">#4169e1

     <td class=c style="background:silver">65,105,225

    <tr>
     <td class=c style="background:saddlebrown">

     <td class=c style="background:#8b4513">

     <td><dfn id=saddlebrown>saddlebrown</dfn>

     <td class=c style="background:silver">#8b4513

     <td class=c style="background:silver">139,69,19

    <tr>
     <td class=c style="background:salmon">

     <td class=c style="background:#fa8072">

     <td><dfn id=salmon>salmon</dfn>

     <td class=c style="background:silver">#fa8072

     <td class=c style="background:silver">250,128,114

    <tr>
     <td class=c style="background:sandybrown">

     <td class=c style="background:#f4a460">

     <td><dfn id=sandybrown>sandybrown</dfn>

     <td class=c style="background:silver">#f4a460

     <td class=c style="background:silver">244,164,96

    <tr>
     <td class=c style="background:seagreen">

     <td class=c style="background:#2e8b57">

     <td><dfn id=seagreen>seagreen</dfn>

     <td class=c style="background:silver">#2e8b57

     <td class=c style="background:silver">46,139,87

    <tr>
     <td class=c style="background:seashell">

     <td class=c style="background:#fff5ee">

     <td><dfn id=seashell>seashell</dfn>

     <td class=c style="background:silver">#fff5ee

     <td class=c style="background:silver">255,245,238

    <tr>
     <td class=c style="background:sienna">

     <td class=c style="background:#a0522d">

     <td><dfn id=sienna>sienna</dfn>

     <td class=c style="background:silver">#a0522d

     <td class=c style="background:silver">160,82,45

    <tr>
     <td class=c style="background:silver">

     <td class=c style="background:#c0c0c0">

     <td><dfn id=silver0>silver</dfn>

     <td class=c style="background:silver">#c0c0c0

     <td class=c style="background:silver">192,192,192

    <tr>
     <td class=c style="background:skyblue">

     <td class=c style="background:#87ceeb">

     <td><dfn id=skyblue>skyblue</dfn>

     <td class=c style="background:silver">#87ceeb

     <td class=c style="background:silver">135,206,235

    <tr>
     <td class=c style="background:slateblue">

     <td class=c style="background:#6a5acd">

     <td><dfn id=slateblue>slateblue</dfn>

     <td class=c style="background:silver">#6a5acd

     <td class=c style="background:silver">106,90,205

    <tr>
     <td class=c style="background:slategray">

     <td class=c style="background:#708090">

     <td><dfn id=slategray>slategray</dfn>

     <td class=c style="background:silver">#708090

     <td class=c style="background:silver">112,128,144

    <tr>
     <td class=c style="background:slategrey">

     <td class=c style="background:#708090">

     <td><dfn id=slategrey>slategrey</dfn>

     <td class=c style="background:silver">#708090

     <td class=c style="background:silver">112,128,144

    <tr>
     <td class=c style="background:snow">

     <td class=c style="background:#fffafa">

     <td><dfn id=snow>snow</dfn>

     <td class=c style="background:silver">#fffafa

     <td class=c style="background:silver">255,250,250

    <tr>
     <td class=c style="background:springgreen">

     <td class=c style="background:#00ff7f">

     <td><dfn id=springgreen>springgreen</dfn>

     <td class=c style="background:silver">#00ff7f

     <td class=c style="background:silver">0,255,127

    <tr>
     <td class=c style="background:steelblue">

     <td class=c style="background:#4682b4">

     <td><dfn id=steelblue>steelblue</dfn>

     <td class=c style="background:silver">#4682b4

     <td class=c style="background:silver">70,130,180

    <tr>
     <td class=c style="background:tan">

     <td class=c style="background:#d2b48c">

     <td><dfn id=tan>tan</dfn>

     <td class=c style="background:silver">#d2b48c

     <td class=c style="background:silver">210,180,140

    <tr>
     <td class=c style="background:teal">

     <td class=c style="background:#008080">

     <td><dfn id=teal0>teal</dfn>

     <td class=c style="background:silver">#008080

     <td class=c style="background:silver">0,128,128

    <tr>
     <td class=c style="background:thistle">

     <td class=c style="background:#d8bfd8">

     <td><dfn id=thistle>thistle</dfn>

     <td class=c style="background:silver">#d8bfd8

     <td class=c style="background:silver">216,191,216

    <tr>
     <td class=c style="background:tomato">

     <td class=c style="background:#ff6347">

     <td><dfn id=tomato>tomato</dfn>

     <td class=c style="background:silver">#ff6347

     <td class=c style="background:silver">255,99,71

    <tr>
     <td class=c style="background:turquoise">

     <td class=c style="background:#40e0d0">

     <td><dfn id=turquoise>turquoise</dfn>

     <td class=c style="background:silver">#40e0d0

     <td class=c style="background:silver">64,224,208

    <tr>
     <td class=c style="background:violet">

     <td class=c style="background:#ee82ee">

     <td><dfn id=violet>violet</dfn>

     <td class=c style="background:silver">#ee82ee

     <td class=c style="background:silver">238,130,238

    <tr>
     <td class=c style="background:wheat">

     <td class=c style="background:#f5deb3">

     <td><dfn id=wheat>wheat</dfn>

     <td class=c style="background:silver">#f5deb3

     <td class=c style="background:silver">245,222,179

    <tr>
     <td class=c style="background:white">

     <td class=c style="background:#ffffff">

     <td><dfn id=white0>white</dfn>

     <td class=c style="background:silver">#ffffff

     <td class=c style="background:silver">255,255,255

    <tr>
     <td class=c style="background:whitesmoke">

     <td class=c style="background:#f5f5f5">

     <td><dfn id=whitesmoke>whitesmoke</dfn>

     <td class=c style="background:silver">#f5f5f5

     <td class=c style="background:silver">245,245,245

    <tr>
     <td class=c style="background:yellow">

     <td class=c style="background:#ffff00">

     <td><dfn id=yellow0>yellow</dfn>

     <td class=c style="background:silver">#ffff00

     <td class=c style="background:silver">255,255,0

    <tr>
     <td class=c style="background:yellowgreen">

     <td class=c style="background:#9acd32">

     <td><dfn id=yellowgreen>yellowgreen</dfn>

     <td class=c style="background:silver">#9acd32

     <td class=c style="background:silver">154,205,50
  </table>

  <h3 id=currentcolor><span class=secno>4.4. </span>‘<a
   href="#currentColor-def"><code class=css>currentColor</code></a>’ color
   keyword</h3>

  <p>CSS1 and CSS2 defined the initial value of <a
   href="https://www.w3.org/TR/REC-CSS1#border-color">the ‘<code
   class=property>border-color</code>’ property</a> to be <q
   cite="https://www.w3.org/TR/REC-CSS1#border-color">the value of the ‘<a
   href="#color"><code class=property>color</code></a>’ property</q> but
   did not define a corresponding keyword. This omission was recognized by
   SVG, and thus <a
   href="https://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.0
   introduced the ‘<code class=css>currentColor</code>’ value</a> for the
   ‘<code class=property>fill</code>’, ‘<code
   class=property>stroke</code>’, ‘<code
   class=property>stop-color</code>’, ‘<code
   class=property>flood-color</code>’, and ‘<code
   class=property>lighting-color</code>’ properties. CSS3 extends the color
   value to include the ‘<a href="#currentColor-def"><code
   class=css>currentColor</code></a>’ keyword to allow its use with all
   properties that accept a &lt;color&gt; value. This simplifies the
   definition of those properties in CSS3.

  <dl>
   <dt><dfn id=currentColor-def>currentColor</dfn>

   <dd>The value of the ‘<a href="#color"><code
    class=property>color</code></a>’ property. The used value of the ‘<a
    href="#currentColor-def"><code class=css>currentColor</code></a>’
    keyword is the computed value of the ‘<a href="#color"><code
    class=property>color</code></a>’ property. If the ‘<a
    href="#currentColor-def"><code class=css>currentColor</code></a>’
    keyword is set on the ‘<a href="#color"><code
    class=property>color</code></a>’ property itself, it is treated as
    ‘<code class=css>color: inherit</code>’.
  </dl>

  <h3 id=css-system><span class=secno>4.5. </span>CSS system colors</h3>

  <h4 id=css2-system><span class=secno>4.5.1. </span>CSS2 system colors</h4>

  <p><strong>Deprecated.</strong> <span class=index-def id=system-colors-def
   title="system colors">In addition to being able to assign color keyword
   values to text, backgrounds, etc., <a
   href="https://www.w3.org/TR/CSS2/ui.html#system-colors">CSS2</a>
   allowed authors to specify colors in a manner that integrated them into
   the user's graphic environment.</span>

  <p>For systems that do not have a corresponding value, the specified value
   should be mapped to the nearest system color value, or to a default color.
   Note that some profiles of CSS may not support System Colors at all.

  <p>The following lists additional values for color-related CSS values and
   their general meaning. Any color property can take one of the following
   names. Although these are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>, it is recommended that the
   mixed capitalization shown below be used, to make the names more legible.

  <dl>
   <dt><dfn id=activeborder>ActiveBorder</dfn>

   <dd>Active window border.

   <dt><dfn id=activecaption>ActiveCaption</dfn>

   <dd>Active window caption.

   <dt><dfn id=appworkspace>AppWorkspace</dfn>

   <dd>Background color of multiple document interface.

   <dt><dfn id=background>Background</dfn>

   <dd>Desktop background.

   <dt><dfn id=buttonface>ButtonFace</dfn>

   <dd>The face background color for 3-D elements that appear 3-D due to one
    layer of surrounding border.

   <dt><dfn id=buttonhighlight>ButtonHighlight</dfn>

   <dd>The color of the border facing the light source for 3-D elements that
    appear 3-D due to one layer of surrounding border.

   <dt><dfn id=buttonshadow>ButtonShadow</dfn>

   <dd>The color of the border away from the light source for 3-D elements
    that appear 3-D due to one layer of surrounding border.

   <dt><dfn id=buttontext>ButtonText</dfn>

   <dd>Text on push buttons.

   <dt><dfn id=captiontext>CaptionText</dfn>

   <dd>Text in caption, size box, and scrollbar arrow box.

   <dt><dfn id=graytext>GrayText</dfn>

   <dd>Grayed (disabled) text. This color is set to #000 if the current
    display driver does not support a solid gray color.

   <dt><dfn id=highlight>Highlight</dfn>

   <dd>Item(s) selected in a control.

   <dt><dfn id=highlighttext>HighlightText</dfn>

   <dd>Text of item(s) selected in a control.

   <dt><dfn id=inactiveborder>InactiveBorder</dfn>

   <dd>Inactive window border.

   <dt><dfn id=inactivecaption>InactiveCaption</dfn>

   <dd>Inactive window caption.

   <dt><dfn id=inactivecaptiontext>InactiveCaptionText</dfn>

   <dd>Color of text in an inactive caption.

   <dt><dfn id=infobackground>InfoBackground</dfn>

   <dd>Background color for tooltip controls.

   <dt><dfn id=infotext>InfoText</dfn>

   <dd>Text color for tooltip controls.

   <dt><dfn id=menu>Menu</dfn>

   <dd>Menu background.

   <dt><dfn id=menutext>MenuText</dfn>

   <dd>Text in menus.

   <dt><dfn id=scrollbar>Scrollbar</dfn>

   <dd>Scroll bar gray area.

   <dt><dfn id=threeddarkshadow>ThreeDDarkShadow</dfn>

   <dd>The color of the darker (generally outer) of the two borders away from
    the light source for 3-D elements that appear 3-D due to two concentric
    layers of surrounding border.

   <dt><dfn id=threedface>ThreeDFace</dfn>

   <dd>The face background color for 3-D elements that appear 3-D due to two
    concentric layers of surrounding border.

   <dt><dfn id=threedhighlight>ThreeDHighlight</dfn>

   <dd>The color of the lighter (generally outer) of the two borders facing
    the light source for 3-D elements that appear 3-D due to two concentric
    layers of surrounding border.

   <dt><dfn id=threedlightshadow>ThreeDLightShadow</dfn>

   <dd>The color of the darker (generally inner) of the two borders facing
    the light source for 3-D elements that appear 3-D due to two concentric
    layers of surrounding border.

   <dt><dfn id=threedshadow>ThreeDShadow</dfn>

   <dd>The color of the lighter (generally inner) of the two borders away
    from the light source for 3-D elements that appear 3-D due to two
    concentric layers of surrounding border.

   <dt><dfn id=window>Window</dfn>

   <dd>Window background.

   <dt><dfn id=windowframe>WindowFrame</dfn>

   <dd>Window frame.

   <dt><dfn id=windowtext>WindowText</dfn>

   <dd>Text in windows.
  </dl>

  <div class="example deprecated-example">
   <p style="display:none">DEPRECATED EXAMPLE(S):

   <p> For example, to set the foreground and background colors of a
    paragraph to the same foreground and background colors of the user's
    window, write the following:

   <pre>
p { color: WindowText; background-color: Window }
</pre>
  </div>

  <!-- Appearance property dropped in https://www.w3.org/TR/2012/WD-css3-ui-20120117/#changes-list

  <p class=note><strong>Note.</strong> The CSS2 System Color values have been
   deprecated in favor of the CSS3 UI ‘<code class=css><a class=index-inst
   href="https://www.w3.org/TR/css-ui-3/#appearance"
   id=appearance>appearance</a></code>’ property. If you want to emulate
   the look of a user interface related element or control, please use the
   ‘<code class=property>appearance</code>’ property instead of
   attempting to mimic a user interface element through a combination of
   system colors.
   -->

  <h3 id=notes><span class=secno>4.6. </span>Notes on using colors</h3>

  <p>Although colors can add significant amounts of information to document
   and make them more readable, please consider the W3C Web Content
   Accessibility Guidelines <a
   href="#ref-WCAG20">[WCAG20]<!--{{WCAG20}}--></a> when including color in
   your documents.

  <ul>
   <li><a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color"><em>1.4.1
    Use of Color:</em> Color is not used as the only visual means of
    conveying information, indicating an action, prompting a response, or
    distinguishing a visual element</a>
  </ul>

  <h2 id=alpha><span class=secno>5. </span>Simple alpha compositing</h2>

  <p>When drawing, implementations must <span class=index-def
   id=compositing-def title=compositing>handle alpha</span> according to the
   rules in <a
   href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">Section
   14.2 Simple alpha compositing</a> of <a
   href="#ref-SVG11">[SVG11]<!--{{!SVG11}}--></a>. (If the ‘<code
   class=css><span class=index-inst
   id=color-interpolation>color-interpolation</span></code>’ or ‘<code
   class=css><span class=index-inst
   id=color-rendering>color-rendering</span></code>’ properties mentioned
   in that section are not implemented or do not apply, implementations must
   act as though they have their initial values.)

  <h2 id=sample><span class=secno>6. </span>Sample style sheet for (X)HTML</h2>

  <p>This appendix is informative, not normative. This style sheet could be
   used by an implementation as part of its default styling of HTML4, XHTML1,
   XHTML1.1, XHTML Basic, and other XHTML Family documents.

  <pre>
html {
	color: black;
	background: white;
}


/* traditional desktop user agent colors for hyperlinks */
:link    { color: blue; }
:visited { color: purple; }

/* default focus outline */
:focus {
	outline: 1px dotted;  /* or 1px dotted invert */
}
</pre>

  <h2 id=profiles><span class=secno>7. </span>Profiles</h2>

  <p>Each specification using <span class=modulename>CSS3 Color</span> must
   define the subset of CSS3 Color features it allows and excludes, and
   describe the local meaning of all the components of that subset.

  <p>Non normative examples:

  <div class=profile>
   <table class=tprofile style="width:75%">
    <tbody>
     <tr>
      <th class=title colspan=2><span class=modulename>CSS3 Color</span>
       profile

     <tr>
      <th>Specification

      <td>HTML4

     <tr>
      <th>Accepts

      <td>Basic color keywords <br>
       RGB six digit hex color values

     <tr>
      <th>Excludes

      <td> ‘<a href="#color"><code class=property>color</code></a>’
       property<br>
       ‘<a href="#opacity"><code class=property>opacity</code></a>’
       property<br>
       RGB three digit hex color values and RGB functional notation color
       value<br>
       RGBA color values<br>
       HSL and HSLA color values<br>
       Extended color keywords<br>
       ‘<a href="#currentColor-def"><code
       class=css>currentColor</code></a>’ color value<br>
       CSS2 UI Colors<br>
       ‘<a href="#transparent-def"><code
       class=css>transparent</code></a>’ color value

     <tr>
      <th>Extra constraints

      <td>none.
   </table>

   <table class=tprofile style="width:75%">
    <tbody>
     <tr>
      <th class=title colspan=2><span class=modulename>CSS3 Color</span>
       profile

     <tr>
      <th>Specification

      <td>CSS level 1

     <tr>
      <th>Accepts

      <td> ‘<a href="#color"><code class=property>color</code></a>’
       property <br>
       Basic color keywords <br>
       RGB color values

     <tr>
      <th>Excludes

      <td> ‘<a href="#opacity"><code class=property>opacity</code></a>’
       property<br>
       RGBA color values<br>
       HSL and HSLA color values<br>
       Extended color keywords<br>
       ‘<a href="#currentColor-def"><code
       class=css>currentColor</code></a>’ color value<br>
       CSS2 UI Colors<br>
       ‘<a href="#transparent-def"><code
       class=css>transparent</code></a>’ color value

     <tr>
      <th>Extra constraints

      <td>none.
   </table>

   <table class=tprofile style="width:75%">
    <tbody>
     <tr>
      <th class=title colspan=2><span class=modulename>CSS3 Color</span>
       profile

     <tr>
      <th>Specification

      <td>CSS level 2

     <tr>
      <th>Accepts

      <td> ‘<a href="#color"><code class=property>color</code></a>’
       property <br>
       Basic color keywords<br>
       RGB color values<br>
       CSS2 UI Colors<br>
       ‘<a href="#transparent-def"><code
       class=css>transparent</code></a>’ color value

     <tr>
      <th>Excludes

      <td> ‘<a href="#opacity"><code class=property>opacity</code></a>’
       property<br>
       RGBA color values<br>
       HSL and HSLA color values<br>
       Extended color keywords<br>
       ‘<a href="#currentColor-def"><code
       class=css>currentColor</code></a>’ color value

     <tr>
      <th>Extra constraints

      <td>‘<a href="#transparent-def"><code
       class=css>transparent</code></a>’ color value not valid for ‘<a
       href="#color"><code class=property>color</code></a>’ property.<br>
       ‘<a href="#orange"><code class=css>orange</code></a>’ color value
       (part of Extended color keywords) is accepted in CSS level 2 revision
       1
   </table>

   <table class=tprofile style="width:75%">
    <tbody>
     <tr>
      <th class=title colspan=2><span class=modulename>CSS3 Color</span>
       profile

     <tr>
      <th>Specification

      <td>SVG 1.0 and 1.1

     <tr>
      <th>Accepts

      <td> ‘<a href="#color"><code class=property>color</code></a>’
       property<br>
       ‘<a href="#opacity"><code class=property>opacity</code></a>’
       property<br>
       Basic color keywords<br>
       RGB color values<br>
       CSS2 UI Colors<br>
       Extended color keywords<br>
       ‘<a href="#currentColor-def"><code
       class=css>currentColor</code></a>’ color value

     <tr>
      <th>Excludes

      <td> RGBA color values<br>
       HSL and HSLA color values<br>
       ‘<a href="#transparent-def"><code
       class=css>transparent</code></a>’ color value

     <tr>
      <th>Extra constraints

      <td>‘<a href="#currentColor-def"><code
       class=css>currentColor</code></a>’ color value not valid for ‘<a
       href="#color"><code class=property>color</code></a>’ property.
   </table>
  </div>

  <h2 id=testsuite><span class=secno>8. </span>Test suite</h2>

  <p>A CSS Color Module <a
    href="https://test.csswg.org/harness/suite/css-color-3_dev/">Test Suite</a> has
    been developed, although further tests may be added.  This test suite is
    intended to allow user agents to verify their basic conformance to the
    specification. This test suite does not pretend to be exhaustive and
    does not cover all possible numerical color values.  These tests are
    available at <a
    href="https://test.csswg.org/harness/suite/css-color-3_dev/">https://test.csswg.org/harness/suite/css-color-3_dev/</a>.
    </p>

    <h2 id="future"><span class=secno>9. </span>Future features</h2>

    <p>This section is non-normative.</p>
    <p>A number of features related to color management,
      such as the ‘<code class=css>@color-profile</code>’ at-rule
      for specifying ICC profiles,
      a means to control the rendering intent of those profiles,
      and a way to use those profiles
      (the ‘<code class=property>color-profile</code>’
      property)
      were removed from CSS Color 3
      due to lack of implementation interest at the time.</p>

    <p>Development of related features continued in CSS Color 4 and 5;
      see the  ‘<a href="https://www.w3.org/TR/css-color-4/#color-function"><code>color()</code>’ function</a>,
      the ‘<a href="https://www.w3.org/TR/css-color-5/#at-profile"><code class=css>@color-profile</code></a>’ at-rule,
      and the ‘<a href="https://www.w3.org/TR/css-color-5/#descdef-color-profile-rendering-intent"><code class=descriptor>rendering-intent</code></a>’ descriptor.
    </p>


  <h2 id=acknowledgments><span class=secno>10. </span>Acknowledgments</h2>

  <p>Thanks to Brad Pettit both for writing up color-profiles, and for
   implementing it. Thanks to Steven Pemberton for a write up on HSL
   colors. Thanks especially to the feedback from Marc Attinasi, Bert Bos,
   Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan
   Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris
   Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup,
   Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler,
   David Woolley, Boris Zbarsky, Steve Zilles, the XSL FO subgroup of the XSL
   working group, and all the rest of the <a
   href="https://lists.w3.org/Archives/Public/www-style/">www-style</a>
   community. And thanks to Chris Lilley for being the resident CSS Color
   expert.

  <h2 id=changes><span class=secno>11. </span>Changes</h2>

  <h3 id="changes-20210805">Changes since the
    <a href="https://www.w3.org/TR/2021/REC-css-color-3-20210805/">05 August 2021 Recommendation</a>
  </h3>

  <p>The following editorial corrections were made:</p>

  <ul>
    <li>Sample HSL values &amp; sample conversion code.</li>
    <li>Clarified case-insensitive is ASCII-case-insensitive.</li>
    <li>Removed "Media" from property definition tables</li>
    <li>Replaced "Call for implementation of dropped features" with "Future features"</li>
  </ul>

  <h3 id="changes-20180619">Changes since the
    <a href="https://www.w3.org/TR/2018/REC-css-color-3-20180619/">19 June 2018</a> Recommendation</h3>

    <ul>
      <li>Candidate Correction 1: Sample HSL values &amp; conversion code.</li>
      <li>Candidate Correction 2: Clarified case-insensitive.</li>
      <li>Candidate Correction 3: Removed "Media" from property definition tables</li>
      <li>Candidate Correction 4: Replaced "Call for implementation of dropped features"</li>
    </ul>

  <h3 id="changes-since-CR">Changes since the <a href="https://www.w3.org/TR/2017/CR-css-color-3-20171205/">5 December 2017 Candidate Recommendation</a> </h3>

  <ul>
    <li>A non-substantive <a href="https://github.com/w3c/csswg-drafts/issues/2401">typo</a> was corrected (stray semicolon)</li>
    <li>Removed trailing link to the no longer present `appearance` property</li>
    <li>Updated this changes section</li>
    <li>Date and boilerplate updates for Proposed Recommendation</li>
  </ul>

  <h3 id="changes-since-REC">Changes since the <a
    href="https://www.w3.org/TR/2011/REC-css3-color-20110607/">2011 June 07
    Recommendation</a></h3>

  <p>This document differs from the <a
   href="https://www.w3.org/TR/2011/REC-css3-color-20110607/">2011 June 07
   Recommendation</a> in that it contains the following changes:

  <ul>
   <li>Mark Introduction section as non-normative.

   <li>Don't use SVG-specific terminology in the definition of opacity.

   <li>Describe the effect of opacity on z-ordering more clearly and make it
    clear that "treated as" does not imply a change in the computed value.

   <li>Make ‘<a href="#currentColor-def"><code
    class=property>currentColor</code></a>’ be a computed value and resolve
    at used value time, instead of being resolved in the computed value.
    (<a href="https://test.csswg.org/harness/test/css-color-3_dev/single/t44-currentcolor-inherited-c/">test</a>, <a href="https://test.csswg.org/harness/results/css-color-3_dev/grouped/t44-currentcolor-inherited-c/">results</a>).


    <li>Updated references to current versions</li>
  </ul>

  <p>For changes in earlier drafts, see
      <a href="https://www.w3.org/TR/2011/REC-css3-color-20110607/#changes">changes in previous Recommendation</a>
      and previous versions linked therefrom.</p>

      <p>Prior dispositions of comments:</p>

      <ul>
      <li><a href="https://drafts.csswg.org/css3-color/issues-lc-2008.html">Disposition of comments on the 2008 Last Call</a>.</li>
      <li><a
      href="https://lists.w3.org/Archives/Public/www-archive/2008Jun/att-0045/disposition-2.html">Disposition of comments on the 2003 Candidate Recommendation</a>.</li>

      <li><a
      href="https://www.w3.org/Style/2003/css3-color-comments.html">Disposition of comments on the 2003 Last Call</a>.</li>
    </ul>


  <h2 id=references><span class=secno>12. </span>References</h2>

  <h3 id=normative><span class=secno>12.1. </span>Normative</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography><!---->

   <dt id=ref-COLORIMETRY>[COLORIMETRY]

   <dd><cite>Colorimetry, Third Edition.</cite> CIE 15:2004. ISBN
    978-3-901906-33-6</dd>
   <!---->

   <dt id=ref-CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
   </dd>
   <!---->

   <dt id=ref-SRGB>[SRGB]

   <dd><a href="https://webstore.iec.ch/publication/6168"><cite>Multimedia systems and
    equipment - Colour measurement and management - Part 2-1: Colour
    management - Default RGB colour space - sRGB.</cite></a> IEC 61966-2-1
    (1999-10) ISBN: 2-8318-4989-6 - ICS codes: 33.160.60, 37.080 - TC 100 -
    51 pp. as amended by Amendment A1:2003. URL: <a
    href="https://webstore.iec.ch/publication/6168">https://webstore.iec.ch/publication/6168</a></dd>
   <!---->

   <dt id=ref-SVG11>[SVG11]

   <dd>Erik Dahlström; et al. <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
    Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
    W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
   </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 id=informative><span class=secno>12.2. </span>Informative</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->


   <!---->

   <dl class=bibliography><!---->
   <dt id=ref-CSS-UI-3>[CSS-UI-3]

   <dd>Tantek Çelik; Florian Rivoal. <a
    href="https://www.w3.org/TR/2018/REC-css-ui-3-20180621/"><cite>CSS Basic
    User Interface Module Level 3 (CSS3 UI).</cite></a> 21 June 2018. W3C
   Recommendation.  URL: <a
    href="https://www.w3.org/TR/2018/REC-css-ui-3-20180621/">https://www.w3.org/TR/2018/REC-css-ui-3-20180621/</a>
   </dd>
   <!---->

   <dt id=ref-CSS2>[CSS2]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets, level 2 (CSS2) Specification.</cite></a> 07 June 2011. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
   </dd>
   <!---->

   <dt id=ref-HTML401>[HTML401]

   <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
    href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
    Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
   </dd>
   <!---->

   <dt id=ref-OEB101>[OEB101]

   <dd><a
    href="https://www.loc.gov/preservation/digital/formats/fdd/fdd000054.shtml"><cite>Open
    eBook(tm) Publication Structure 1.0.1.</cite></a> Open eBook Forum(tm).
    02 July 2001. URL: <a
    href="https://www.loc.gov/preservation/digital/formats/fdd/fdd000054.shtml">https://www.loc.gov/preservation/digital/formats/fdd/fdd000054.shtml</a>
   </dd>
   <!---->

   <dt id=ref-SVG10>[SVG10]

   <dd>Jon Ferraiolo. <a
    href="http://www.w3.org/TR/2001/REC-SVG-20010904"><cite>Scalable Vector
    Graphics (SVG) 1.0 Specification.</cite></a> 4 September 2001. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a>
   </dd>
   <!---->

   <dt id=ref-WCAG20>[WCAG20]

   <dd>Ben Caldwell; et al. <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/"><cite>Web Content
    Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a>
   </dd>
   <!---->

   <dt id=ref-X11COLORS>[X11COLORS]

   <dd>Wikipedia <a
    href="https://en.wikipedia.org/wiki/X11_color_names"><cite>X11 color names.</cite></a>
     URL: <a
    href="https://en.wikipedia.org/wiki/X11_color_names">https://en.wikipedia.org/wiki/X11_color_names</a>
   </dd>
   <!---->

   <dt id=ref-XML10>[XML10]

   <dd>C. M. Sperberg-McQueen; et al. <a
    href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible
    Markup Language (XML) 1.0 (Fifth Edition).</cite></a> 26 November 2008.
    W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-xml-20081126/">http://www.w3.org/TR/2008/REC-xml-20081126/</a>
   </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>ActiveBorder, <a href="#activeborder"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ActiveCaption, <a href="#activecaption"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>aliceblue, <a href="#aliceblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>&lt;alphavalue&gt;, <a href="#alphavalue-def"
    title="section 3.2."><strong>3.2.</strong></a>, <a href="#ltalphavaluegt"
    title="section 4.2.2.">4.2.2.</a>, <a href="#ltalphavaluegt0"
    title="section 4.2.5.">4.2.5.</a>

   <li>antiquewhite, <a href="#antiquewhite"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>AppWorkspace, <a href="#appworkspace"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>aqua, <a href="#aqua" title="section 4.1."><strong>4.1.</strong></a>,
    <a href="#aqua0" title="section 4.3."><strong>4.3.</strong></a>

   <li>aquamarine, <a href="#aquamarine"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>azure, <a href="#azure" title="section 4.3."><strong>4.3.</strong></a>

   <li>Background, <a href="#background"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>beige, <a href="#beige" title="section 4.3."><strong>4.3.</strong></a>

   <li>bisque, <a href="#bisque"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>black, <a href="#black"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#black0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>blanchedalmond, <a href="#blanchedalmond"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>blue, <a href="#blue" title="section 4.1."><strong>4.1.</strong></a>,
    <a href="#blue0" title="section 4.3."><strong>4.3.</strong></a>

   <li>blueviolet, <a href="#blueviolet"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>brown, <a href="#brown" title="section 4.3."><strong>4.3.</strong></a>

   <li>burlywood, <a href="#burlywood"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>ButtonFace, <a href="#buttonface"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ButtonHighlight, <a href="#buttonhighlight"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ButtonShadow, <a href="#buttonshadow"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ButtonText, <a href="#buttontext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>cadetblue, <a href="#cadetblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>CaptionText, <a href="#captiontext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>chartreuse, <a href="#chartreuse"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>chocolate, <a href="#chocolate"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>color, <a href="#color"
    title="section 3.1."><strong>3.1.</strong></a>

   <li>&lt;color&gt;, <a href="#valuea-def-color"
    title="section 4."><strong>4.</strong></a>

   <li>color:&#60;color&#62;, <a href="#ltcolorgt"
    title="section 3.1."><strong>3.1.</strong></a>

   <li>color-interpolation, <a href="#color-interpolation"
    title="section 5.">5.</a>

   <li>color-rendering, <a href="#color-rendering" title="section 5.">5.</a>

   <li>compositing, <a href="#compositing-def"
    title="section 5."><strong>5.</strong></a>

   <li>coral, <a href="#coral" title="section 4.3."><strong>4.3.</strong></a>

   <li>cornflowerblue, <a href="#cornflowerblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>cornsilk, <a href="#cornsilk"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>crimson, <a href="#crimson"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>currentColor, <a href="#currentColor-def"
    title="section 4.4."><strong>4.4.</strong></a>, <a href="#currentcolor"
    title="section 3.1.">3.1.</a>, <a href="#currentcolor1"
    title="section 3.1.">3.1.</a>

   <li>cyan, <a href="#cyan" title="section 4.3."><strong>4.3.</strong></a>

   <li>darkblue, <a href="#darkblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkcyan, <a href="#darkcyan"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkgoldenrod, <a href="#darkgoldenrod"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkgray, <a href="#darkgray"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkgreen, <a href="#darkgreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkgrey, <a href="#darkgrey"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkkhaki, <a href="#darkkhaki"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkmagenta, <a href="#darkmagenta"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkolivegreen, <a href="#darkolivegreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkorange, <a href="#darkorange"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkorchid, <a href="#darkorchid"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkred, <a href="#darkred"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darksalmon, <a href="#darksalmon"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkseagreen, <a href="#darkseagreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkslateblue, <a href="#darkslateblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkslategray, <a href="#darkslategray"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkslategrey, <a href="#darkslategrey"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkturquoise, <a href="#darkturquoise"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>darkviolet, <a href="#darkviolet"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>deeppink, <a href="#deeppink"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>deepskyblue, <a href="#deepskyblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>dimgray, <a href="#dimgray"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>dimgrey, <a href="#dimgrey"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>dodgerblue, <a href="#dodgerblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>firebrick, <a href="#firebrick"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>floralwhite, <a href="#floralwhite"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>forestgreen, <a href="#forestgreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>fuchsia, <a href="#fuchsia"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#fuchsia0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>gainsboro, <a href="#gainsboro"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>ghostwhite, <a href="#ghostwhite"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>gold, <a href="#gold" title="section 4.3."><strong>4.3.</strong></a>

   <li>goldenrod, <a href="#goldenrod"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>gray, <a href="#gray" title="section 4.1."><strong>4.1.</strong></a>,
    <a href="#gray0" title="section 4.3."><strong>4.3.</strong></a>

   <li>GrayText, <a href="#graytext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>green, <a href="#green"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#green0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>greenyellow, <a href="#greenyellow"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>grey, <a href="#grey" title="section 4.3."><strong>4.3.</strong></a>

   <li>Highlight, <a href="#highlight"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>HighlightText, <a href="#highlighttext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>honeydew, <a href="#honeydew"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>hotpink, <a href="#hotpink"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>hsl(), <a href="#hsl-def"
    title="section 4.2.4."><strong>4.2.4.</strong></a>

   <li>hsla(), <a href="#hsla-def"
    title="section 4.2.5."><strong>4.2.5.</strong></a>

   <li>InactiveBorder, <a href="#inactiveborder"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>InactiveCaption, <a href="#inactivecaption"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>InactiveCaptionText, <a href="#inactivecaptiontext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>indianred, <a href="#indianred"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>indigo, <a href="#indigo"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>InfoBackground, <a href="#infobackground"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>InfoText, <a href="#infotext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ivory, <a href="#ivory" title="section 4.3."><strong>4.3.</strong></a>

   <li>khaki, <a href="#khaki" title="section 4.3."><strong>4.3.</strong></a>

   <li>lavender, <a href="#lavender"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lavenderblush, <a href="#lavenderblush"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lawngreen, <a href="#lawngreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lemonchiffon, <a href="#lemonchiffon"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightblue, <a href="#lightblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightcoral, <a href="#lightcoral"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightcyan, <a href="#lightcyan"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightgoldenrodyellow, <a href="#lightgoldenrodyellow"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightgray, <a href="#lightgray"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightgreen, <a href="#lightgreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightgrey, <a href="#lightgrey"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightpink, <a href="#lightpink"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightsalmon, <a href="#lightsalmon"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightseagreen, <a href="#lightseagreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightskyblue, <a href="#lightskyblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightslategray, <a href="#lightslategray"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightslategrey, <a href="#lightslategrey"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightsteelblue, <a href="#lightsteelblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lightyellow, <a href="#lightyellow"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>lime, <a href="#lime" title="section 4.1."><strong>4.1.</strong></a>,
    <a href="#lime0" title="section 4.3."><strong>4.3.</strong></a>

   <li>limegreen, <a href="#limegreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>linen, <a href="#linen" title="section 4.3."><strong>4.3.</strong></a>

   <li>magenta, <a href="#magenta"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>maroon, <a href="#maroon"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#maroon0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumaquamarine, <a href="#mediumaquamarine"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumblue, <a href="#mediumblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumorchid, <a href="#mediumorchid"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumpurple, <a href="#mediumpurple"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumseagreen, <a href="#mediumseagreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumslateblue, <a href="#mediumslateblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumspringgreen, <a href="#mediumspringgreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumturquoise, <a href="#mediumturquoise"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mediumvioletred, <a href="#mediumvioletred"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>Menu, <a href="#menu"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>MenuText, <a href="#menutext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>midnightblue, <a href="#midnightblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mintcream, <a href="#mintcream"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>mistyrose, <a href="#mistyrose"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>moccasin, <a href="#moccasin"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>navajowhite, <a href="#navajowhite"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>navy, <a href="#navy" title="section 4.1."><strong>4.1.</strong></a>,
    <a href="#navy0" title="section 4.3."><strong>4.3.</strong></a>

   <li>oldlace, <a href="#oldlace"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>olive, <a href="#olive"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#olive0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>olivedrab, <a href="#olivedrab"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>opacity, <a href="#opacity"
    title="section 3.2."><strong>3.2.</strong></a>

   <li>orange, <a href="#orange"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>orangered, <a href="#orangered"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>orchid, <a href="#orchid"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>palegoldenrod, <a href="#palegoldenrod"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>palegreen, <a href="#palegreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>paleturquoise, <a href="#paleturquoise"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>palevioletred, <a href="#palevioletred"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>papayawhip, <a href="#papayawhip"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>peachpuff, <a href="#peachpuff"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>peru, <a href="#peru" title="section 4.3."><strong>4.3.</strong></a>

   <li>pink, <a href="#pink" title="section 4.3."><strong>4.3.</strong></a>

   <li>plum, <a href="#plum" title="section 4.3."><strong>4.3.</strong></a>

   <li>powderblue, <a href="#powderblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>purple, <a href="#purple"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#purple0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>red, <a href="#red" title="section 4.1."><strong>4.1.</strong></a>, <a
    href="#red0" title="section 4.3."><strong>4.3.</strong></a>

   <li>#rgb, <a href="#rgb"
    title="section 4.2.1."><strong>4.2.1.</strong></a>

   <li>rgb(), <a href="#rgb-def"
    title="section 4.2.1."><strong>4.2.1.</strong></a>

   <li>rgba(), <a href="#rgba-def"
    title="section 4.2.2."><strong>4.2.2.</strong></a>

   <li>rosybrown, <a href="#rosybrown"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>royalblue, <a href="#royalblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>#rrggbb, <a href="#rrggbb"
    title="section 4.2.1."><strong>4.2.1.</strong></a>

   <li>saddlebrown, <a href="#saddlebrown"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>salmon, <a href="#salmon"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>sandybrown, <a href="#sandybrown"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>Scrollbar, <a href="#scrollbar"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>seagreen, <a href="#seagreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>seashell, <a href="#seashell"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>sienna, <a href="#sienna"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>silver, <a href="#silver"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#silver0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>skyblue, <a href="#skyblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>slateblue, <a href="#slateblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>slategray, <a href="#slategray"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>slategrey, <a href="#slategrey"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>snow, <a href="#snow" title="section 4.3."><strong>4.3.</strong></a>

   <li>springgreen, <a href="#springgreen"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>sRGB, <a href="#sRGB-def"
    title="section 4.2.1."><strong>4.2.1.</strong></a>, <a href="#srgbval"
    title="section 4.1.">4.1.</a>

   <li>steelblue, <a href="#steelblue"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>system colors, <a href="#system-colors-def"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>tan, <a href="#tan" title="section 4.3."><strong>4.3.</strong></a>

   <li>teal, <a href="#teal" title="section 4.1."><strong>4.1.</strong></a>,
    <a href="#teal0" title="section 4.3."><strong>4.3.</strong></a>

   <li>thistle, <a href="#thistle"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>ThreeDDarkShadow, <a href="#threeddarkshadow"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ThreeDFace, <a href="#threedface"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ThreeDHighlight, <a href="#threedhighlight"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ThreeDLightShadow, <a href="#threedlightshadow"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>ThreeDShadow, <a href="#threedshadow"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>tomato, <a href="#tomato"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>transparent, <a href="#transparent-def"
    title="section 4.2.3."><strong>4.2.3.</strong></a>, <a
    href="#transparent0" title="section 3.1.">3.1.</a>

   <li>turquoise, <a href="#turquoise"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>violet, <a href="#violet"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>wheat, <a href="#wheat" title="section 4.3."><strong>4.3.</strong></a>

   <li>white, <a href="#white"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#white0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>whitesmoke, <a href="#whitesmoke"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>Window, <a href="#window"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>WindowFrame, <a href="#windowframe"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>WindowText, <a href="#windowtext"
    title="section 4.5.1."><strong>4.5.1.</strong></a>

   <li>yellow, <a href="#yellow"
    title="section 4.1."><strong>4.1.</strong></a>, <a href="#yellow0"
    title="section 4.3."><strong>4.3.</strong></a>

   <li>yellowgreen, <a href="#yellowgreen"
    title="section 4.3."><strong>4.3.</strong></a>
  </ul>
  <!--end-index-->

  <h2 class="no-num heading settled" id="privacy"><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy"></a></h2>
  <p>No new privacy considerations have been reported on this specification.</p>
  <h2 class="no-num heading settled" id="security"><span class="content">Security Considerations</span><a class="self-link" href="#security"></a></h2>
  <p>No new security considerations have been reported on this specification.</p>
  

  <h2 class=no-num id=property>Property index</h2>
  <!--begin-properties-->


    <table class=proptable>
      <thead>
       <tr>
        <th>Property</th>

        <th>Values</th>

        <th>Initial</th>

        <th>Applies to</th>

        <th>Inh.</th>

        <th>Percentages</th>
       </tr>

      <tbody>
       <tr>
        <th><a class=property href="#color">color</a></th>

        <td>&lt;color&gt; | inherit</td>

        <td>depends on user agent</td>

        <td></td>

        <td>yes</td>

        <td>N/A</td>

       </tr>

       <tr>
        <th><a class=property href="#opacity">opacity</a></th>

        <td>&lt;alphavalue&gt; | inherit</td>

        <td>1</td>

        <td></td>

        <td>no</td>

        <td>N/A</td>

       </tr>
     </table>

  <!--end-properties-->

  <p role="navigation" id="back-to-top"><a href="#title"><abbr title="Back to top">↑</abbr></a></p>


  <script src="//www.w3.org/scripts/TR/2021/fixup.js"></script>
